今回はコンテンツごとに1ページをフルスクリーンで表示し、スクロール移動してもピタッとかっこよく表示することができるpagePiling.jsの使い方を紹介します。
オプションも豊富に用意されているので使い勝手もなかなか良さそうです。
とはいってもなかなか言葉では伝わりづらいのでまずは公式ページのでもを見てみてください。
公式ページはこちら↓
目次
pagePilingの導入
pagePiling自体は公式ページからダウンロードできます。スクリプトとCSSを読み込んでください。
ついでにjQueryも一緒に読み込んでしまいましょう。
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>pagePilingの使い方
HTMLとCSS
フルスクリーンで表示させたい部分のHTMLは以下のようになります。
各セクションのクラスやidは適当でも構いませんが、あとでそれぞれスタイルを適用することになるので、idはわかりやすい名前に連番を振っておくのがいいと思います。また、クラスは全て同じものを指定しておきましょう。
<div id="pagepiling">
<div class="contents" id="section1">
<!--contents01-->
</div>
<div class="contents" id="section2">
<!--contents02-->
</div>
<div class="contents" id="section3">
<!--contents03-->
</div>
<div class="contents" id="section4">
<!--contents04-->
</div>
</div>
それと、これは別になくても大丈夫ですが、メニューのHTMLです。
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
<li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
</ul>
data-menuanchor属性の値と各sectionの名前は一致していなくても別に構いません。
後述するjsのアンカー指定部分、data-menuanchor属性の値、href属性が一致していれば動作します。
ついでにメニューはCSSで固定しておいたほうが使い勝手がいいと思います。
#menu{
position: fixed;
z-index: 9999;
}
js
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3','page4'],
navigation: {
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
scrollingSpeed: 1000,
sectionSelector: '.contents'
});
});
メニューとアンカーは大体セットで使うことになると思います。
menuにはメニューにしたい部分のid、anchorにはHTMLに記述したアンカーと同じものを書きます。
navigationでは表示域の右側に表示されるドットのナビゲーションに関するオプションを決めることができます。
ただ、ドットナビゲーションのCSSに関してはjquery.pagepiling.cssを編集した方が早いでしょう。
scrollingSpeedはセクション移動時のスピード、sectionSelectorはHTMLで指定したクラスをいれます。
基本的な使い方はこんな感じですが、公式ページにもっとオプションや詳しい使い方が乗っているので、より詳しい情報は公式ページを参考にしてください。
最後に今回使用したコードをまとめたものを貼っておきます。
<head>
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3','page4'],
navigation: {
'position': 'right',
'tooltips': ['section1', 'section2', 'section3', 'section4']
},
scrollingSpeed: 1000,
sectionSelector: '.contents'
});
});
</script>
<style>
#menu{
position: fixed;
z-index: 9999;
}
/*わかりやすくするためにセクションごとに背景色変えています*/
#section1{background: #ff0;}
#section2{background: #0f0;}
#section3{background: #00f;}
#section4{background: #aaa;}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">Page 1</a></li>
<li data-menuanchor="page2"><a href="#page2">Page 2</a></li>
<li data-menuanchor="page3"><a href="#page3">Page 3</a></li>
<li data-menuanchor="page4"><a href="#page4">Page 4</a></li>
</ul>
<div id="pagepiling">
<div class="contents" id="section1">
<!--contents01-->
</div>
<div class="contents" id="section2">
<!--contents02-->
</div>
<div class="contents" id="section3">
<!--contents03-->
</div>
<div class="contents" id="section4">
<!--contents04-->
</div>
</div>
</body>