fullPage.jsの使い方メモ
fullPage.jsはフル画面でコンテンツを表示して、少しスクロールするだけで、次のコンテンツまでスクロールさせるjQueryのプラグインです。
それの使い方メモ。
以下のURLからダウンロード出来ます。
http://alvarotrigo.com/fullPage/
本家のドキュメントはこちら
本家ドキュメントの一部を日本語でわかりやすく説明します。
（特にたくさんあるオプションを中心に説明します。）
ファイルの読み込み（Including files）
必要なファイル（JSやCSSファイル）を読み込ませます。
head部分でCSSファイルを読み込ませます。
<link rel="stylesheet" href="css/jquery.fullPage.css">
</body>直上にscriptファイルの読み込みを記述します。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="js/vendors/jquery.easings.min.js"></script> <script src="js/vendors/jquery.slimscroll.min.js"></script> <script src="js/jquery.fullPage.min.js"></script>
CDNを使って読み込む場合（Optional use of CDN）
もし CDNで各ファイルを読み込みたい場合は下のリンク先を参考にしてください。
CDNJS:https://cdnjs.com/libraries/fullPage.js
HTMLを記述
ドキュメントに沿って必要なコードを記述していきます。
HTML部分はシンプルに記述。
<div id="fullpage"> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> <div class="section">Some section</div> </div>
ドキュメントでは各セクションを<div class=”section”>〜としていますが、ここをsectionタグで記述してもOKな様です。
<div id="fullpage"> <section class="section">Some section</section> <section class="section">Some section</section> <section class="section">Some section</section> <section class="section">Some section</section> </div>
初期化（Initialization）
そして実行初期設定のスクリプトを記述します。
$(document).ready(function() {
$('#fullpage').fullpage();
});
あとはCSSでデザインをあわせていけば、とりあえずフルスクリーンで、少しスクロールするだけで、次のページ（セクション）が表示されます。
アンカーリンクと横スライドページの設定
各セクションに直接飛べるアンカーリンクを設置することも出来ます。
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'],
menu: '#menu'
});
anchorsオプションでリンクアンカー名を設定します。
menuオプションでリンクナビメニューのリスト（ボックス）を指定します。
そして書きのようにHTMLを記述します。
<ul id="menu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="3rdPage"><a href="#3rdPage">Third section</a></li> <li data-menuanchor="4thpage"><a href="#4thpage">Fourth section</a></li> </ul>
また、ページ（セクション）内にスライドで子ボックスを設置することも可能です。 <div class="section"> <div class="slide" data-anchor="slide1"> Slide 1 </div> <div class="slide" data-anchor="slide2"> Slide 2 </div> <div class="slide" data-anchor="slide3"> Slide 3 </div> <div class="slide" data-anchor="slide4"> Slide 4 </div> </div>
その際のURLは、”http://〜#secondPage/slide3″という形になります。
各種オプション（Options）
fullPage.jsには各種パラメータで色々な設定が出来るようになっています。
| パラメータ | 初期値 | Description（概要） |
|---|---|---|
| controlArrows | true | ページ（セクション）内のスライドボックスに左右の矢印を表示させるかどうかを決めるオプション。 |
| verticalCentered | true | ページ（セクション）内のコンテンツの縦方向の位置を中央にするかどうかを決めるオプション。 |
| resize | false | ブラウザのウィンドウをリサイズした時に、テキストも一緒にリサイズするかどうかを決めるオプション。 |
| scrollingSpeed | 700 | スクロールする時間をミリセコンドで設定できるオプション。 |
| sectionsColor | none | 各ページ（セクション）の背景色を指定できるオプション。 |
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
| パラメータ | 初期値 | Description（概要） |
|---|---|---|
| anchors | [] | アンカーリンク名を設定するオプション。 注意事項としてアンカー名はHTML要素内にあるidと同じものは使えません。 |
| lockAnchors | false | アンカーリンク機能をロックしてしまう機能。 |
| easing | easeInOutCubic | 垂直方向と水平方向のスクロールに使用するトランジションエフェクトを定義します。 jquery.easings.min.jsなどのjQueryのUIを読み込む事が必須です。 |
| easingcss3 | ease | easeCSS3を用いたトランジションエフェクトを定義します。あらかじめ定義されたもの（例えば、線形、容易アウト…など）を使用するか、または立方ベジエ関数を使用して独自のものを作成することができます。あなたはそれのためのアニメーションツールを緩和マシューレインCSSを使用することもできます。 |
| loopTop | false | トップページ（セクション）までスクロールアップした時に、ラストページ（セクション）まで戻りループするかどうかを設定出来るオプション。 |
| loopBottom | false | ラストページ（セクション）までスクロールダウンした時に、トップページ（セクション）まで戻りループするかどうかを設定出来るオプション。 |
| loopHorizontal | true | ラストまたはトップのスライドに到達したとき、後の水平スライダががループするかどうかを設定できるオプション。 |
| css3 | true | スクロールの動きをCSS3で実行するかJavaScriptで実行するかを端末情報で判断して変換する事が出来るオプション。このオプションがtrueの場合ブラウザがCSS3をサポートしていない環境ではjQueryの代替が代わりに使用されます。ブラウザがCSS3をサポートしていると、モバイルデバイスなどの動きをスピードアップするのに貢献します。 |
| autoScrolling | true | 少しスクロールした時に自動で次のページ（セクション）までスクロースするかどうかを設定出来るオプション。 |
| fitToSection | true | viwportにセクションに適合するかどうかを決定します。 |
| scrollBar | false | スクロールバーの表示/非表示の設定。 |
| paddingTop | 0 | CSSのpadding-topの値を指定。 |
| paddingBottom | 0 | CSSのpadding-bottomの値を指定。 |
| fixedElements | null | ページ（セクション）のpositionをCSSの’fixed’（固定）にするかどうか設定できるオプション。 値には固定したい要素名を記述する。 |
| normalScrollElements | null | 指定したページ（セクション）要素が表示している時に、スクロール機能が働かないように出来るオプション。値に各要素名を指定する。 |
| keyboardScrolling | true | キーボードでのスクロールを許可するかどうかのオプション。 |
| touchSensitivity | 5 | タッチディスプレイなどの感度を設定するオプション。 |
| continuousVertical | false | 最後のページ（セクション）にスクロールダウンすると、最初のページ（セクション）スクロールダウンした先に表示するや、最初のセクションで上にスクロールすると、最後のものがスクロールアップした先に表示した場合に設定する。 loopTopまたはloopBottomと互換性がありません。 |
| animateAnchor | true | アンカー付きURL（http:~/#secpageなど）でアクセスあった場合に、トップからアニメーションして表示するか、そのままそのページ（セクション）を表示させるかを設定できるオプション。 |
| recordHistory | true | ブラウザの履歴にサイトの状態をプッシュするかどうかを定義します。 |
| menu | false | メニューになる要素を指定します。メニューの要素をリンクするためには、HTML 5のデータ·タグ（データmenuanchor）はセクション内で使用されるのと同じアンカーリンクで使用するために必要とされます。 |
<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li> </ul>
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#myMenu'
});
| パラメータ | 初期値 | Description（概要） |
|---|---|---|
| navigation | false | 設定をtrueにすると、黒丸のナビゲーションが表示されます。 |
| navigationPosition | none | 上記のナビゲーションの位置を”left”もしくは”right”に設定出来ます。 |
| navigationTooltips | [] | ナビゲーションにマウスオーバーした時のtooltipsの内容を定義出来ます。 例:navigationTooltips: [‘firstSlide’, ‘secondSlide’] |
| showActiveTooltip | false | アクティブ（表示されている）ページのtooltip名を表示させます。 |
| slidesNavigation | false | 横スライドのナビゲーションを表示させるかどうかを設定するオプション。 |
| slidesNavPosition | bottom | 横スライドのナビゲーションの表示位置を”top”か”bottom”で設定します。 |
| scrollOverflow | false | その内容がそれの高さより大きい場合に、ページ（セクション）のためにスクロールを作成するべきかどうか定めます。 |
その他にも設定可能なオプションもありますので、本家をご参照ください。
メソッド（Methods）
また各種メソッドも用意されているので、onloadやonclick、onrisizeで設定変更や動きなどを実行する事も可能です。
https://github.com/alvarotrigo/fullPage.js#methods
コールバック（Callbacks）
コールバック関数も各種用意されているので、例えばページ（セクション）が表示されたらエレメンツを動かすなどの関数を実行させる事も可能で、パララックスデザインでの利用などが考えられます。
https://github.com/alvarotrigo/fullPage.js#callbacks
作成例（Examples）
基本的な使い方を理解すれば、公式ページやダウンロードしたフォルダ内にある豊富なサンプルがとても参考になります。
http://alvarotrigo.com/fullPage/
Extensions（機能拡張）
2018年11月16日追記
再度このプラグインの作者さんから、さらに便利な機能拡張を増やしたので追加で紹介してほしいとメールをいただきました。
パララックス効果を追加する機能拡張の他に、最後のスライドから最初のスライドに戻る動きを追加するもの、レスポンシブに対応するものなど、10種類追加されています。
https://alvarotrigo.com/fullPage/extensions/
詳しくは上記のリンクから。
2017年3月15日追記
このプラグインの作者さんからとても便利な機能拡張も作っているのでとお知らせメールが届きました。
簡単なクラスを定義するだけでバックグランドのパララックス効果ができる機能拡張だそうです。
こちらは、有償になるのですが、fullPage.jsを使っている場合は簡単に導入できるので時間のない案件にはいいかもしれません。
