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