こんにちは、ハル@haru_elpisです。
jQueryで各セクションを画面いっぱいに表示でき、スクロールでコンテンツを切り替えていくようなページが作れてしまう「pagePiling.js」の紹介です。
pagePiling.js
ダウンロード
pagePiling.js plugin | Create a stack of scrolling pages
pagePiling.js plugin by Alvaro Trigo. Create a stack of scrolling pages.
ダウンロードした「jquery.pagepiling.css」・「jquery.pagepiling.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。
head
<link rel="stylesheet" href="jquery.pagepiling.css">
<script src="js/jquery.pagepiling.min.js"></script>
HTML
<div id="pagepiling">
<section class="section" id="section">
〜内容〜
</section>
</div>
<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>
</ul>
</nav>
javascript
<script>
$(function() {
$('#pagepiling').pagepiling({
menu: '#nav',
sectionSelector: '.section',
sectionsColor: ['#fff', '#eee'],
anchors: ['page1', 'page2'],
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['page1', 'page2']
},
});
});
</script>
オプション
menu メニューにしたい部分のidを入れる
sectionSelector 各セクションの共通のクラスを入れる
sectionColor 各セクションの背景色
上記などがあります。
コメント