簡単5分でパララックスサイトができる！jQuery fullpage.jsの使い方
Design tips,Web design
Tags:jQuery
今回はパララックスサイトを簡単に作成できるjquery「fullpage.js」を紹介したいと思います。普段自分はなかなかそういったパララックスサイトを作る機会はないのですが、今回ようやく機会に恵まれたので、色々ある中から今回の「fullpage.js」を選択しました。理由は一つのコンテンツをスクロールで一つずつ表示してくれるjqueryがよかったからです。様々なオプションがついているのも魅力のひとつでした。ちなみに横スクロールもできるみたいで、工夫次第でいろんなことができそうです。
DEMO
目次
1.パララックスサイトとは？
すでにいろんなサイトで解説されているので今更感はあるのですが、一応解説をしておくと、parallaxを直訳すると視差といい、視差効果のあるサイトのことを指します。手前と奥で奥行きがあったり、スクロールに合わせてスピードの異なる要素が動いていくような視差効果のあるサイトの事です。
2.事前準備
- jQuery本体をサイトに入れておく
- fullpage.jsからライブラリをダウンロード
3.ダウンロードしたファイルを読み込む
早速fullpage.jsからダウンロードした「fullPage.js-master」ファイルを開き、読み込みます。 読み込むファイルはjquery.fullPage.css、jquery.fullPage.min.jsの二つでいいかと思います。
|
1 2 |
<link rel="stylesheet" href="css/jquery.fullPage.css"> <script type="text/javascript" src="js/jquery.fullPage.min.js"></script> |
4.HTMLに記述する
全体をid="fullpage"で囲んでそれぞれのセクションをclass="section"で囲むだけで基本OKです。sectionとなっているのをdivにかえても大丈夫です。
|
1 2 3 4 5 6 |
<div id="fullpage"> <section class="section"><h2>Section1</h2></section> <section class="section"><h2>Section2</h2></section> <section class="section"><h2>Section3</h2></section> <section class="section"><h2>Section4</h2></section> </div> |
横スクロールを追加する場合は
|
1 2 3 4 5 6 7 8 9 10 11 |
<div id="fullpage"> <section class="section"><h2>Section1</h2></section> <section class="section"><h2>Section2</h2> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </section> <section class="section"><h2>Section3</h2></section> <section class="section"><h2>Section4</h2></section> </div> |
のようにdivのクラスにslideを追加すればいいようです。
5.head内に記述する
HTMLの記述が終わったら、次にhead内に動作用のスクリプトの記述を行います。 基本的な動作は下記のコードを記述すれば可能です。
|
1 2 3 |
$(document).ready(function() { $('#fullpage').fullpage(); }); |
今回はナビゲーションを右側につけてみました。それとメニューボタンからのアンカーリンクもつけています。ちょっとつまづいたところはanchorsをつけることで各sectionへリンクが飛ぶものだと思っていたのですが、menuでアンカーリンクをつけているナビゲーションを指定してあげないといけませんでした。あとはナビゲーションのボタンデザインなどは各自jquery.fullPage.cssを変更して変えてください。また、それぞれのsectionに切り替わるごとにsectionに応じたfp-viewing-01というクラスがbodyにつきます。（anchorsオプションを使用している場合はfp-viewing-アンカー名となります。）なのでこのsectionには共通のこの要素は表示させたくないといったことも可能になります。便利ですね。
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { $('#fullpage').fullpage({ anchors:['section1', 'section2', 'section3', 'section4'], menu: '#slide_menu', navigation: true, navigationPosition : 'right' }); }); |
他にも多数オプションがありますが、個人的にはこの動作があれば充分かなと思っています。 デモも作ってみましたので、参考にしてみてください。
DEMO
6.fullpage.jsオプション
fullpage.js GitHubより公開されているオプションです。細かい解説は割愛させていただきますが、ナビゲーション、スクロール、アクセシビリティ、デザイン、カスタムセレクタ、イベントのオプションがあります。
