簡単5分でパララックスサイトができる!jQuery fullpage.jsの使い方

今回はパララックスサイトを簡単に作成できる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の二つでいいかと思います。

4.HTMLに記述する

全体をid="fullpage"で囲んでそれぞれのセクションをclass="section"で囲むだけで基本OKです。sectionとなっているのをdivにかえても大丈夫です。

横スクロールを追加する場合は

のようにdivのクラスにslideを追加すればいいようです。

5.head内に記述する

HTMLの記述が終わったら、次にhead内に動作用のスクリプトの記述を行います。 基本的な動作は下記のコードを記述すれば可能です。

今回はナビゲーションを右側につけてみました。それとメニューボタンからのアンカーリンクもつけています。ちょっとつまづいたところはanchorsをつけることで各sectionへリンクが飛ぶものだと思っていたのですが、menuでアンカーリンクをつけているナビゲーションを指定してあげないといけませんでした。あとはナビゲーションのボタンデザインなどは各自jquery.fullPage.cssを変更して変えてください。また、それぞれのsectionに切り替わるごとにsectionに応じたfp-viewing-01というクラスがbodyにつきます。(anchorsオプションを使用している場合はfp-viewing-アンカー名となります。)なのでこのsectionには共通のこの要素は表示させたくないといったことも可能になります。便利ですね。

他にも多数オプションがありますが、個人的にはこの動作があれば充分かなと思っています。 デモも作ってみましたので、参考にしてみてください。

DEMO

6.fullpage.jsオプション

fullpage.js GitHubより公開されているオプションです。細かい解説は割愛させていただきますが、ナビゲーション、スクロール、アクセシビリティ、デザイン、カスタムセレクタ、イベントのオプションがあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

【保存版】ウェブ制作の際に役に立つ参考サイト厳選3選+おまけつき

CSSで蛍光ペンで下線を引いたようなマーカー風デザインを作る方法

CSSでマウスホバー時のREAD MOREアニメーションを作る