サイトデザインを考えている時、国内海外問わずいろんなサイトを見て参考にさせていただいているのですが、最近PCサイトで多く見かけるのが画面いっぱいのサイトデザイン。
中にはスクロールするごとに、アニメーションで動きがあるものもあって、すごくかっこよくておしゃれな感じなんです。
そんなかっこよくておしゃれなサイトが簡単に作れるフルスクロールするjQueryのプラグインfullpage.jsの使い方をまとめてみました。
私のポートフォリオにも使用してみたので、こちらをベースに紹介していきますね。
fullpage.jsの導入方法
- fullpage.jsのパッケージをダウンロード
- CSS/jQueryプラグインファイルをディレクトリにアップ
- 外部ファイルとしてheadタグに追記
- HTMLにID/クラス名を記述
- fullPage.jsを実行する
- fullPage.jsのオプションの設定
1.fullpage.jsのパッケージをダウンロード
まず、fullpage.jsのマスターデータをまるっとダウンロードします。
ダウンロードできない場合は、公式デモページのダウンロードから入手してください。
2.CSS/jQueryプラグインファイルをディレクトリにアップ
ダウンロードして展開すると、下記のようなフォルダとファイルが入っていると思います。
使用するのはこの中の下記のファイルです。
- jquery.fullPage.css
- jquery.fullPage.min.js
Sassを使いたい時はjquery.fullPage.scssを使います。
minファイルの方が圧縮されていて軽いのでjquery.fullPage.min.jsにしていますが、jquery.fullPage.jsのどちらでも大丈夫です。
このファイルを使用するディレクトリにアップします。
私のポートフォリオのディレクトリ構成は下記のようになっています。
css
– jquery.fullPage.css
– style.css(通常のCSSファイル)
js
– jquery.fullPage.min.js
– contents.js(プラグイン実行用JSファイル)
index.php
上記を参考にして、次はheadタグでCSS/Javascriptファイルを呼び出します。
3.外部ファイルとしてheadタグに追記
index.php
<link rel="stylesheet" type="text/css" href="/css/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/jquery.easings.min.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
<script src="/js/jquery.fullPage.min.js"></script>
<script src="/js/contents.js"></script>
この時、jQueryも一緒に呼び出すことを忘れないようにしてください。
下記は、jQuery1.11.1のバージョンを呼び出しています。
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
下記はオプションです。CSS3で、スクロールの動きを設定するために使用します。
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
下記もオプションです。scrollOverflowを使用するために使用します。
index.php
<script src="/js/jquery.slimscroll.min.js"></script>
これで呼び出しの記述ができたので、次は要素に記述していきますが、今の時点でサーバーにアップし、デペロッパーツールなどでscriptファイルが読み込まれているか確認するといいかもしれません。
4.HTMLにID/クラス名を記述
fullpage.jsを動かす設定をHTMLに記述していきます。
私のポートフォリオ場合ですと、navタグが固定でその他のコンテンツをフルスクロールしたいので、下記ようになります。
index.php
<nav></nav>
<main id="fullpage">
<div class="section"></section>
<div class="section"></section>
<div class="section"></section>
<div class="section"></section>
</main>
.sectionがスクロールするコンテンツになり、#fullpageがそれを覆うコンテンツになります。
イメージ的にはこんな感じです。
ここからさらに、一番初めの.sectionに横スライドを入れています。
横スライドは.sectionの中に.sildeを追加するだけです。
index.php
<nav></nav>
<main id="fullpage">
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</section>
<div class="section"></section>
<div class="section"></section>
<div class="section"></section>
</main>
自動的に右ボタンと左ボタンがつくと思います。これらのスタイルは、jquery.fullPage.cssを修正すればカスタマイズできます。
実行の準備は完了です。
5.fullPage.jsを実行する
実行するだけであれば、さすがプラグインなだけにとっても簡単です。contents.jsで下記のように記述するだけなんです。
contents.js
$(function(){
$('#fullpage').fullpage();
});
簡単ですね!まずはここまでで、するっとフルスクロールするはずなので確認してみてください。
6.fullPage.jsのオプションを設定する
fullpage.jsの素晴らしいところは、オプションの設定が細かくできるところですね。
今回特にいいなと思ったのは、コンテンツスクロールした時に呼び出される関数です。
私のポートフォリオでは、一番初めのコンテンツの場合に、navを非表示にしたりロゴの画像を大きくしたりしているのですが、その時に使用したのがonLeaveというオプションです。
contents.js
var fullpageEvent = function(index, nextIndex, direction){
//index
//スクロールするコンテンツの番号
//nextIndex
//次に表示されるコンテンツの番号
//direction
//upかdownか
if(nextIndex == 1){
//ここに初めに戻った時の処理
}else{
//それ以外の時の処理
}
}
$(function(){
$('#fullpage').fullpage({
onLeave: fullpageEvent
});
});
その他のオプションは下記にまとめてみたので、参考にしてください。
ナビゲーションのオプション
オプション名 |
初期値 |
説明 |
menu |
‘#menu’ |
フルスクロールのメニューの要素名
|
lockAnchors |
false |
メニューのアンカー有効無効
|
anchors |
[‘firstPage’, ‘secondPage’] |
メニューのアンカー先要素(配列)
|
navigation |
false |
右や左に表示されるフルスクロールのナビゲーション表示設定
|
navigationPosition |
‘right’ |
フルスクロールのナビゲーションの位置
|
navigationTooltips |
[‘firstSlide’, ‘secondSlide’] |
フルスクロールのナビゲーションに表示される名前(配列)
|
showActiveTooltip |
false |
フルスクロールのナビゲーションに表示される名前の表示設定
|
slidesNavigation |
true |
スライドショーのナビゲーション表示設定
|
slidesNavigation |
true |
スライドショーのナビゲーション位置設定
|
スクロールのオプション
オプション名 |
初期値 |
説明 |
css3 |
true |
スクロールの動き設定
|
css3 |
true |
スクロールの動き設定(falseの場合はjavascript)
|
scrollingSpeed |
700 |
スクロールの動く速度
|
autoScrolling |
true |
スクロールした時に自動的に次の要素を表示するかどうか
|
fitToSection |
true |
コンテンツを自動的に画面に合わせて調整するかどうか
|
fitToSectionDelay |
true |
コンテンツを自動的に画面に合わせて調整する時の速度
|
scrollBar |
true |
画面デフォルトのスクロールバーを表示するかどうか
|
easing |
easeInOutCubic |
スクロールの動きの種類
|
easingcss3 |
ease |
CSS3を使用するときのスクロールの動きの種類
|
loopBottom |
false |
フルスクロールを最後までした時に、ループするかどうか
|
loopTop |
false |
一番初めのコンテンツより上にスクロールした時、ループするかどうか
|
loopHorizontal |
true |
スライドショーをループさせるかどうか
|
normalScrollElements |
‘#element1, .element2’ |
自動スクロールをOFFしたい要素設定
|
scrollOverflow |
false |
sectionが画面より大きい時にスクロールして表示するかどうか
|
touchSensitivity |
15 |
タッチデバイスでのスワイプ感度設定
|
normalScrollElementTouchThreshold |
5 |
タッチデバイスでの要素の重なり設定?
詳細
|
アクセシビリティのオプション
オプション名 |
初期値 |
説明 |
keyboardScrolling |
true |
キーボードでのスクロールの有効無効
|
animateAnchor |
true |
URLにハッシュが付いていた時などにスクロールアニメーションするかどうか
|
recordHistory |
true |
スクロールした時にブラウザに履歴を残すかどうか
|
デザインのオプション
オプション名 |
初期値 |
説明 |
controlArrows |
true |
スライドショーの矢印の表示設定
|
verticalCentered |
true |
縦方向に中央寄せにするかどうか
|
resize |
false |
画面サイズを変えた時にリサイズして表示するかどうか
|
sectionsColor |
[‘#ccc’, ‘#fff’] |
フルスクロールコンテンツの背景色設定(配列)
|
paddingTop |
‘3em’ |
フルスクロールコンテンツの上部の余白設定(固定要素がある時便利)
|
paddingBottom |
’10px’ |
フルスクロールコンテンツの下部の余白設定(固定要素がある時便利)
|
fixedElements |
‘#header, .footer’ |
固定表示する要素設定
|
responsiveWidth |
0 |
通常のスクロールに変化する幅の設定
|
responsiveHeight |
0 |
通常のスクロールに変化する高さの設定
|
カスタムセレクタのオプション
オプション名 |
初期値 |
説明 |
sectionSelector |
‘.section’ |
フルスクロールを実行するためのdivに設定するクラス名
|
sectionSelector |
‘.slide’ |
スライドショーを表示するためのdivに設定するクラス名
|
イベントのオプション
オプション名 |
初期値 |
説明 |
onLeave |
function(index, nextIndex, direction){} |
コンテンツスクロール開始時に呼び出される関数
|
afterLoad |
function(anchorLink, index){} |
コンテンツスクロール完了時に呼び出される関数
|
afterRender |
function(){} |
ぺージ読み込み時に呼び出される関数
|
afterResize |
function(){} |
ブラウザの画面リサイズ時に呼び出される関数
|
afterSlideLoad |
function(anchorLink, index, slideAnchor, slideIndex){} |
スライド開始時に呼び出される関数
|
onSlideLeave |
function(anchorLink, index, slideIndex, direction, nextSlideIndex){} |
スライド完了時に呼び出される関数
|
fullpage.jsを使っているサイト
簡単に実装できるfullpage.jsですが、有名な会社やキャンペーンページなどでも多く見かけます。
私が見てきた中でfullpage.jsを使っているサイトをいくつか紹介しますね。アイディアやコーディングの参考になります。
国内ではMoneytreeのサイトが有名でしょうか。オーソドックスな使い方をしているので、とても参考にしやすいですね。
個人的には、Salta BOOMBOXのサイトがお気に入りです。デザインのぼかしも合わせて、遠近感を演出していて、fullpage.jsのイベントハンドラで画像の動きを入れているので臨場感があって素敵です。
最後に
fullpage.jsのイベントを使えば、通常のフルスクロールアニメーションだけでなく、もっと緻密なサイトデザインも作れそうです。
コンテンツの高さをフルに使って、スクロールJavascriptを実装するのはなかなか骨が折れると思うので、fullpage.jsのようにサクッと実装できるとWebデザインの幅もぐっと広がりますね。
是非試してみてください!