[jQuery]fullPage.jsでパララックスサイトを作ろう
2015年あたりから見た人を引き込みやすいパララックスサイトはトレンドとなり、現在でも新しい見せ方のパララックスサイトが次々と登場しています。
今回はGoogleなども使用している簡単に全画面スクロールのパララックスサイトが作れるFullPage.jsプラグインを私のおさらいも兼ねて紹介します。
パララックスってなに？
視差効果のことです。
サイトの場合、ページをスクロールする際に画面の手前と奥とでスクロールの速度に差をつけることで、奥行きや立体感を表現するものを指します。
FullPage.jsって？
「jquery パララックス」と検索したくらいでは上位に表示されないのですが、有名なのはGoogleをはじめとした大手企業がこのプラグインを採用しているおかげでしょう。
全画面表示でスクロールすると次の全画面表示がするっと現れます。
実際にデモサイトを見てみましょう。
fullPage.js
全画面のカルーセルも可能です。とてもシンプルですが、インスピレーションが湧くような動きですね。
そして、Appleが実際に作りそうなデモもこのfullPage.jsでプラグインの製作者が作っています(iPhone5のプロダクトページには採用されていたようです)。クールですね。
Apple fullPage.js Demo
この他に動画も全画面で表示させることができます。
FullPage.jsの使い方
早速使ってみましょう。段取りは以下です。
- サイトからファイルをダウンロード
- HTMLマークアップ
- スクリプトを追加
- CSSで整形
fullPage.jsの入手
以下のページからファイルをダウンロードします。
fullPage.js-サイトページ
fullPage.js-GitHubダウンロードページ
GitHubのダウンロードは右側にあるをクリックして、右側のからダウンロードできます。
解凍したフォルダの中で、基本形に必要なファイルはjquery.fullPage.cssとjquery.fullPage.jsあるいはjquery.fullPage.min.jsの2つです。
※たまに他の解説サイトでjquery-ui.min.jsを読み込ませている記事を見かけますが、jQueryUI無しでも動きますので、扱い方がわからない場合は読み込ませなくてもOKです。
次はマークアップです。
HTML-ファイル設置+画面マークアップ
ファイルを埋め込みます。
もちろん、CDNでも可能です。CDNはそれぞれ
- CSSファイル：https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css
- jsファイル：https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js
を読み込みます。jQuery本体も忘れずに読み込ませます。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script> </body> </html> |
画面をマークアップしていきます。まずはナビゲーションです。
1 2 3 4 5 6 | <ul id="menu"> <li data-menuanchor="1page" class="active"><a href="#1page">First slide</a></li> <li data-menuanchor="2page"><a href="#2page">Second slide</a></li> <li data-menuanchor="3page"><a href="#3page">Third slide</a></li> <li data-menuanchor="4page"><a href="#4page">Third slide</a></li> </ul> |
data-menuanchor=""とclass="active"は隣のページに遷移していくのと同時に、該当ページのナビゲーション内にあるボタン表示が変わっていく「アンカー」という機能が使えるように書いています。
次にページをマークアップします。
1 2 3 4 5 6 | <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”></div>の中に入れて使います。
1 2 3 4 5 6 | <div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> |
全体的な文書構造はこちら。2番目のページにカルーセルを入れてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css"> </head> <body> <ul id="menu"> <li data-menuanchor="1page" class="active"><a href="#1page">First slide</a></li> <li data-menuanchor="2page"><a href="#2page">Second slide</a></li> <li data-menuanchor="3page"><a href="#3page">Third slide</a></li> <li data-menuanchor="4page"><a href="#4page">Fourth slide</a></li> </ul> <div id="fullpage"> <div class="section">Some section</div> <div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> <div class="section">Some section</div> <div class="section">Some section</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script> </body> </html> |
次はスクリプトを書きます。
jQuery
fullpage.min.jsの下に書くか、fullpage-myscript.jsみたいなファイルを別に作って読み込ませます。
基本形は以下だけです。
1 2 3 4 5 | <script> $(document).ready(function() { $('#fullpage').fullpage(); }); </script> |
これを下にいろいろオプションを付け足していきます。
まずは先ほどナビゲーションで書いておいたアンカーを使えるようにします。
1 2 3 4 5 6 7 8 | <script> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['1page', '2page', '3page','4page'], menu: '#menu' }); }); </script> |
ついでに背景色も変えてしまいましょう。
1 2 3 4 5 6 7 8 9 | <script> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['1page', '2page', '3page','4page'], menu: '#menu', sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5'] //ここの''内の色を変えられます。 }); }); </script> |
これで十分動きます。
次はナビゲーション部分をCSSで整えていきます。
CSS
…と言っても、デモサイトとほぼ同じデザインですが…ここからカスタムするのもいいですね。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | .section { text-align: center; font-size: 200%; } #menu li { display:inline-block; margin: 10px; color: #000; background:#fff; background: rgba(255,255,255, 0.5); -webkit-border-radius: 10px; border-radius: 10px; } #menu li.active{ background:#666; background: rgba(0,0,0, 0.5); color: #fff; } #menu li a{ text-decoration:none; color: #000; } #menu li.active a:hover{ color: #000; } #menu li:hover{ background: rgba(255,255,255, 0.8); } #menu li a, #menu li.active a{ padding: 9px 18px; display:block; } #menu li.active a{ color: #fff; } #menu{ position:fixed; top:0; left:0; height: 40px; z-index: 70; width: 100%; padding: 0; margin:0; } |
一応これでおおむね完成です。
コピペだけなら簡単！です…しかし記事を書くのは時間がかかりますね(^^;)
表示して確認してみよう
文書構造の確認
ここまでの文書構造が以下です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>fullPage.js - selfDEMO</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css"> </head> <body> <ul id="menu"> <li data-menuanchor="1page" class="active"><a href="#1page">First slide</a></li> <li data-menuanchor="2page"><a href="#2page">Second slide</a></li> <li data-menuanchor="3page"><a href="#3page">Third slide</a></li> <li data-menuanchor="4page"><a href="#4page">Fourth slide</a></li> </ul> <div id="fullpage"> <div class="section">Some section</div> <div class="section"> <div class="slide"> Slide 1 </div> <div class="slide"> Slide 2 </div> <div class="slide"> Slide 3 </div> <div class="slide"> Slide 4 </div> </div> <div class="section">Some section</div> <div class="section">Some section</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script> <script> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['1page', '2page', '3page','4page'], menu: '#menu', sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5'] }); }); </script> </body> </html> |
CSSはインラインよりもfullpage-style.cssみたいなファイルを作って読み込ませたほうがいいですね。
表示してみよう！
うまく動くか確認してみましょう。
See the Pen fullPage.js by necomacustom (@tamayura) on CodePen.27739
上々ですね。
その他オプション
fullPage.jsは多機能なパララックスプラグインですが、多機能すぎるので、よく使われていそうかな？というものをまとめてみました。
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { $('#fullpage').fullpage({ scrollingSpeed: 1000, //スクロールするスピードをミリ秒で設定・デフォルトは700 easing: easeInSine, //垂直方向と水平方向のスクロールに使用するトランジションエフェクトを定義・デフォルトはeaseInOutCubic loopBottom: true, //ラストページまでスクロールダウンした時に、トップページに戻るループするかどうかを設定・デフォルトはfalse autoScrolling: true, //少しスクロールした時に自動で次のページまでスクロースするかどうかを設定・デフォルトはtrue scrollBar: false, //スクロールバーの表示/非表示の設定・デフォルトはfalse navigation: false, //右側に黒丸のナビゲーションの表示/非表示の設定・デフォルトはfalse scrollOverflow: true //内容がページの高さより大きい場合に、スクロールを作成するべきかどうかを設定・デフォルトはfalse }); }); |
※上記のうち、easingだけは「fullPage.jsの入手」の章で書いたjQueryUIやfullPage.jsフォルダ内の「vendors」フォルダに格納されているjquery.easings.min.jsを読み込む必要があります。
おまけ
この記事を書く際に資料としていろいろな記事を読んでいたのですけれども、個人的に琴線に触れたものをご紹介します。
multiScroll.js
製作者さんが更にかっこいいプラグインを作っているようです。
multiScroll.js
左側は下から、右側は上からスクロールしてきて全画面表示になるという、最近見かけるようになった左右分割ページのスクロール版がこのプラグインで作れます。
もっと機能をすっきりとさせたい
fullPage.jsは軽量かつ多機能で素晴らしいのですが、それでも他のプラグインを使ったり、重いファイルを使う事態がないとは言い切れません…
JavaScript/jQueryの勉強でよく記事を読んでいるBlack Flagさんが実験と称して1ページごとにスクロールで遷移するUIを実装する記事を書いていらっしゃいます。
このようにゴリゴリとコードが書けるようになりたいです。
意外と軽量なのでササッとパララックスページを作成したい時に便利ですね。
ランディングページや、そう多くないアイテムを相手に印象付けたい場合に使えそうです。
実装が簡単な反面、しっかりとしたサイトを作るとなると、見せ方に工夫が必要と感じました。
また、『パララックス サイト』のような検索するといっぱいパララックスサイトが出てきますので、研究材料に事欠かず嬉しい限りですね。ねこま（@necomacustom）でした。