【jQuery】pagePiling.jsで1ページスクロールを実装する
WEB 2018.07.18
1ページスクロールを簡単に作れるjQueryプラグイン「pagePiling.js」の実装方法についてご紹介します。
各セクションを画面いっぱいに表示できて、スクロールでコンテンツを切り替えていくようなページが作れます。
公式のデモはこちら
pagePiling.js plugin | Create a stack of scrolling pages
僕もデモページを作ってみました。
pagePiling.jsのダウンロード
公式のデモページの「Download」ボタンをクリックして、ファイル一式をダウンロードします。
pagePiling.jsの実装方法
ダウンロードしたZIPファイルを解凍し、下記のファイルを読み込みます。
- jquery.pagepiling.css
- jquery.pagepiling.min.js
<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>
CSSファイルは、<head>タグ内で、
jsファイルは、<body>の閉じタグ直前で、jQuery本体の下に記述してください。
HTMLの書き方
僕の作ったデモページでは、大体下記のように書いてます。
各セクションの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」というクラスを付けてます。すると、セクションの高さ分はスクロールできるようになります。
ナビゲーションのHTMLはこんな感じです。
<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>
JavaScriptの書き方
最初に読み込んだ「jquery.pagepiling.min.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 | 画面右側に表示されるドットのナビゲーション。位置とか色とかツールチップのテキストなんかを設定する |
その他にも色々とオプションがあるようなので、下記リンクで確認してみてください。
おわり
以上、1ページスクロールを簡単に実装できるjQueryプラグイン「pagePiling.js」のご紹介でした。