fullPage.jsで１つのコンテンツをスクロールして表示させたあとにJavaScriptを実行する

フルスクリーンでコンテンツを表示するWebページが増えましたね！
私も制作に携わることがあり、「fullPage.js」というjQueryプラグインを利用しました:)

「fullPage.js」は、１つのコンテンツをフルスクリーン表示させて、スクロールすることで１ページ分が自動でスクロールし、次のコンテンツが表示されるページを簡単に作ることができます。
わかりにくいかもしれないので、デモをご確認ください。

このfullPage.jsを使い、スクロールしてコンテンツが表示されたらJavaScriptを実行させたい！と思い、色々と調べました。
コンテンツが表示されてからアニメーションなどが動作するとカッコイイですよね！
（onLeaveというオプションを使えば可能であることがわかりました）

せっかくなので、基本の使い方や他のオプションなど調べたことをまとめます。

• fullPage.jsの使い方
• オプションを設定する

fullPage.jsは、MITライセンスで、IE8以降のブラウザに対応しています。公式ページは以下のURLからどうぞ。

fullPage.js One Page Scroll Site Plugin

fullPage.jsの使い方

fullPage.jsの導入はとても簡単です:)

• fullPage.jsのダウンロード
• HTMLへjQueryと必要なファイルを読み込む
• HTMLを記述
• JavaScriptを記述

    jquery.fullPage.css
    jquery.fullPage.js
    

    vandors/jquery.easings.min.js
    

    vendors/jquery.slimscroll.min.js
    

    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easings.min.js"></script>
    <script type="text/javascript" src="jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="jquery.fullPage.js"></script>
    

    <div id="fullpage">//fullPage.jsを適応させる範囲
        <div class="section">//縦方向にスクロールさせる
            <div class="slide">スライド１枚目の内容</div>//コンテンツ内の横スライド
            <div class="slide">スライド２枚目の内容</div>
            <div class="slide">スライド３枚目の内容</div>
        </div>
        <div class="section">
            ２つ目の縦方向コンテンツ
        </div>
        …
    </div>
    

$(document).ready(function() {
    $('#fullpage').fullpage();
});

$(document).ready(function() {
    $('#fullpage').fullpage({
        navigation: true,
        navigationPosition: 'right'
    });
});

オプションを設定する

fullPage.jsは多彩なオプションが用意されています！
私がやりたかった、コンテンツが表示されてからJavaScriptを実行させるのもオプションで可能でした。

いくつかのオプションを記述例と共にご紹介します。
他にも素敵なオプションがありますので、fullPage.jsの公式ページデモや、GitHubをご覧ください！

• fullPage.js One Page Scroll Site Plugin
• alvarotrigo/fullPage.js · GitHub

複数のオプションを使うときは、「,」 で区切って記述してください。

• scrollingSpeed：スクロール速度
• scrollBar：スクロールバーの表示
• loopBottom：最後のコンテンツで下にスクロールしたら最初に戻る
• paddingTop：セクション毎のpadding-top
• paddingBottom：セクション毎のpadding-bottom
• navigation：縦スクロール用ナビゲーションの表示
• navigationPosition：navigationの位置
• slidesNavigation：横スライド用ナビゲーションの表示
• slidesNavPosition：slideNavigationの位置
• onLeave：スクロールで移動したあとに関数を呼び出す（コールバック）

scrollingSpeed

スクロールの速度を調整します。

初期値：700mm/s

$(document).ready(function() {
    $('#fullpage').fullpage({
    	scrollingSpeed: 1000
    });
});

scrollBar

スクロールバーを表示させるかどうかを設定します。

初期値：false（非表示）

$(document).ready(function() {
    $('#fullpage').fullpage({
    	scrollBar: true
    });
});

loopBottom

縦にスクロールするコンテンツの最後が表示された状態で、下にスクロールしたとき一番最初のコンテンツへ戻ることができます。

初期値：false（戻らない）

$(document).ready(function() {
    $('#fullpage').fullpage({
        loopBottom: true
    });
});

paddingTop

各セクションにpadding-topを設定します。固定ヘッダーを使うときに便利です:)

初期値：0

$(document).ready(function() {
    $('#fullpage').fullpage({
    	paddingTop: '50px'
    });
});

paddingBottom

各セクションにpadding-bottomを設定します。固定フッターを使うときに便利です:)

初期値：0

$(document).ready(function() {
    $('#fullpage').fullpage({
    	paddingBottom: '50px'
    });
});

navigation

縦スクロールするコンテンツに対してのページャーが表示されます。

初期値：false（非表示）

$(document).ready(function() {
    $('#fullpage').fullpage({
    	navigation: true
    });
});

navigationPosition

「navigation」オプションで表示させるナビゲーションの場所を変更することができます。
leftかrightを指定することが可能です。

初期値：なし

$(document).ready(function() {
    $('#fullpage').fullpage({
    	navigation: true,
    	navigationPosition : 'right'
    });
});

slidesNavigation

横スライドするコンテンツに対してのページャーが表示されます。

初期値：false（非表示）

$(document).ready(function() {
    $('#fullpage').fullpage({
        slidesNavigation: true
    });
});

slidesNavPosition

slideNavigationの表示位置を変更することができます。
topかbottomを指定することが可能です。

初期値：bottom

$(document).ready(function() {
    $('#fullpage').fullpage({
        slidesNavigation: true,
        slidesNavPosition:'top'
    });
});

onLeave

現在表示しているコンテンツからスクロールし、移動するとこのオプションが呼び出されます。
私がやりたかった、スクロールしてからJavaScriptを実行するのはこのオプションで可能でした！

$(document).ready(function() {
	$('#fullpage').fullpage({
		onLeave: function(index, nextIndex, direction){
			if(index == 1 && direction =='down'){
			//セクション１を下にスクロールしたとき実行されます
				alert('１枚目を下にスクロールして、こんにちは２枚目！');
			}
			else if(index == 2 && direction =='up')
			//セクション２を上にスクロールしたときに実行されます
				alert('２枚目を上にスクロールして、こんにちは１枚目！');
		}
    });
});

記述例はアラートを表示させていますが、ここに実行させたいJavaScriptを記述するとそれが実行されます:)
indexの値が、現在表示しているコンテンツが、縦にスクロールしているコンテンツのいくつめかを示し、directionで上下どちらに動いているのかを判別することができます。

終わりに

非常に簡単に画面いっぱいの表現ができるjQueryプラグイン「fullPage.jp」！
大きな画面でコンテンツを表示すると、とてもインパクトがあって良いですね。また、ページの遷移がアニメーションなので、とてもリッチな印象を受けます。

この記事を読んでくださったあなたが、fullPage.jsを使ってみようかな？と思ってくださったら幸いです。