【30：fullPage】1画面毎にスクロール | JQueryプラグイン

f:id:seintoseiya:20150730183156p:plain
プロジェクトNo.30：fullPage -> DEMO

1画面毎にスクロールできるプラグインです。
縦スクロールはもちろん、横にもスクロールさせてスライドの様にも使えます。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
fullPage.js | One Page Scroll sections Site Plugin

今回ダウンロードしたのはfullPage.js-master.zipです。
この中から使うのは以下のファイル。

jquery.fullPage.min.js
jquery.fullPage.css

以下のjqueryバージョンで動作が確認できました。

jquery1.10.1.min.js

基本的な使い方

HTML

まずはJSを呼び出し。

<script src="./js/jquery1.10.1.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>

以下の様にそれぞれdiv要素を記述します。

#fullpage : fullPage.jsを適用する範囲(fullpageの名前は任意)
.section : スクロールする１画面分
.slide : 横スライドの１画面分

<div id="fullpage">
    <div class="section" id="section1">
    <h1>fullPage.js DEMO</h1>
    <h2>First Page</h2>
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide2-1"><h2>Second Page</h2><h3>First Slide</h3></div>
        <div class="slide" id="slide2-2"><h2>Second Page</h2><h3>Second Slide</h3></div>
        <div class="slide" id="slide2-3"><h2>Second Page</h2><h3>Third Slide</h3></div>
    </div>
    <div class="section" id="section3">
    <h2>Third Page</h2>
    </div>
</div>

JavaScript

fullpage関数を呼び出す

fullpage.jsを適用したいdiv要素に対してfullpage()関数を呼び出します。

$(document).ready(function() {
    $('#fullpage').fullpage({
        navigation: true, // 縦スクロールのナビゲーションの表示
        navigationPosition: 'right', // 縦スライドのナビゲーション位置
        scrollingSpeed: 1000, // スクロールスピード
        scrollBar: true,　// スクロールバーの表示
        loopBottom: true, // 最後の画面をスクロールした後、最初に戻るか
        slidesNavigation: true, // スライドのナビゲーション表示
    });
});