※ご注意：本記事は2015年に執筆した記事をもとに、部分的に更新しました。
現在のfullPage.jsでは、ファイル名・導入方法・ライセンス条件などが変更されています。
最新情報は公式ドキュメントを確認し、商用サイトやクライアントワークで利用する場合は、ライセンス条件を確認してください。
（2026年6月更新）
はじめましてデザイナーの鈴木といいます。
月1ペースでブログを書いていくと思うので、よろしくお願いします。
先日、fullPage.jsを利用してWebページを制作しました。
簡単に実装できたので、今回はその使い方を紹介します。
※fullPage.jsは、画面単位でスクロールするフルスクリーン型のWebページを実装できるJavaScriptライブラリです。
以前はjQueryプラグインとして利用されることが多く、この記事では当時のjQuery版の使い方を紹介しています。
「fullPage.js」とは
1ページ分ごとにスクロールし、紙芝居のように次のコンテンツを表示できるJavaScriptライブラリです。
この記事では、jQuery版の使い方を紹介しています。
実際の動きは公式ページのデモをご覧ください。
https://alvarotrigo.com/fullPage/
「fullPage.js」の使い方
まずは必要なファイルを下記から一式ダウンロード。
https://github.com/alvarotrigo/fullPage.js
ダウンロードしたファイルから下記2つを読み込みます。
jquery.fullPage.css
jquery.fullPage.js
読み込む記述は下記のようになります。
※jQuery本体ファイルの読み込みを忘れずに！
<link rel="stylesheet" href="jquery.fullPage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.fullPage.js"></script>
JavaScriptの記述方法
head内に下記のコードを記述します。
$(document).ready(function() {
$('#fullpage').fullpage();
});
htmlの記述方法
<div id="fullpage"> <div class="section">1ページ目の内容</div> <div class="section">2ページ目の内容</div> <div class="section">3ページ目の内容</div> <div class="section">4ページ目の内容</div> </div>
「fullPage.js」が反応する範囲は、「fullpage」というidを付けた要素内になります。
「section」というクラス名で囲ったdivが1ページ分にあたります。
この「section」内に、画像やテキストを配置します。
「fullPage.js」の基本的な実装は以上になります。
オプションや細かい設定方法などは公式ページや下記参考リンクをご参照ください。
オプション
細かい設定のオプションが数多く用意されています。
詳細は公式ページを参照ください。
まとめ
簡単にオプション設定もでき、便利なライブラリでした。
ただ読み込んだ一回目にしかアニメーションなどの動作が反応しないのが欠点です。
一度ページの下まで読んで上に戻る場合、アニメーションが動きません。
※再度読み込みすると動作します。
細かい挙動を求められていなければ、「fullPage.js」で充分機能するので、
ぜひ使ってみてはいかがでしょうか！？
もし細かい挙動が必要な場合は他のプラグインなども合わせて使うといいと思います。
先日制作したサイトでは「inview」というプラグインも合わせて利用しました。
「inview」の使い方も今後紹介できればと思います。
今回はここまでになります。
それではまたの機会に！
参考サイト
下記サイトはオプションなど詳しく紹介しているので、
詳細が知りたい方はどうぞ！
