今回は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：画面端に表示されるナビゲーション。テキストカラーや位置を指定できる
他にもオプションはたくさんあるので、以下のリンクを参考にしてください。
