one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【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バージョンで動作が確認できました。

  • 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 : スクロールする1画面分
  • .slide : 横スライドの1画面分
<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, // スライドのナビゲーション表示
    });
});

オプション

上記の様に、必要に応じてオプションを修正してください。
オプションの種類は以下のGitHubページで紹介されています。
alvarotrigo/fullPage.js · GitHub

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)