pagePiling.jsで1ページスクロールを実装する方法

今回は1ページスクロールを簡単に実装できるjQueryプラグイン「pagePiling.js」を紹介します。

1ページスクロールでは各セクションを画面いっぱいに表示させ、スクロールするとページのように次のセクションに移動するというものです。

 

まずは公式のデモで確認してみてください↓

pagePiling.js plugin | Create a stack of scrolling pages

 

pagePiling.jsの使い方

pagePiling.jsは公式ページからダウンロードできます。

ダウンロードしたファイルのうち、「jquery.pagepiling.css」「jquery.pagepiling.min.js」の2つのファイルを読み込みましょう。

<link rel="stylesheet" href="jquery.pagepiling.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>

 

HTMLの書き方

pagePiling.jsを実装するには、以下のようなHTMLを書きます。

<div id="pagepiling">
    <section class="section" id="section1">
        〜内容〜
    </section>
    <section class="section pp-scrollable" id="section2">
        〜内容〜
    </section>
    <section class="section" id="section3">
        〜内容〜
    </section>
    <section class="section" id="section4">
        〜内容〜
    </section>
</div>

 

各セクションに同じクラスを記述してください。

#section2のpp-scrollableクラスは、セクション分の高さは普通にスクロールできるようにするクラスです。セクションの高さが高くてスクロールしないと入らない場合はこのクラスを追加するとよきです。

 

ナビゲーションはこんな感じ。

<nav>
    <ul id="nav">
        <li data-menuanchor="page1" class="active"><a href="#page1">Page1</a></li>
        <li data-menuanchor="page2"><a href="#page2">Page2</a></li>
        <li data-menuanchor="page3"><a href="#page3">Page3</a></li>
        <li data-menuanchor="page4"><a href="#page4">Page4</a></li>
    </ul>
</nav>

 

jQueryの書き方

以下のコードを適当なjsファイルに記述しましょう。これでpagePiling.jsが動くようになります。

<script>
$(function() {
    $('#pagepiling').pagepiling({
        menu: '#nav',
        sectionSelector: '.section',
        sectionsColor: ['#fff', '#eee', '#ddd', '#ccc'],
        anchors: ['page1', 'page2', 'page3', 'page4'],
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['page1', 'page2', 'page3', 'page4']
        },
    });
});
</script>

 

オプションの意味は以下の通りです。

  • menu:メニューにしたい箇所のidを記述
  • sectionSelector:各セクション共通のクラスを記述
  • sectionColor:各セクションの背景色を記述
  • anchors:HTMLのdata-menuanchor属性と同じ値を記述
  • navigation:画面端に表示されるナビゲーション。テキストカラーや位置を指定できる

 

他にもオプションはたくさんあるので、以下のリンクを参考にしてください。

GitHub – alvarotrigo/pagePiling.js: pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections.