pagePiling.jsを使ってマウススクロールでページを切り替える方法を紹介します。
このライブラリを使用すると、フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの矢印キーでページを切り替えることができます。
Contents
ディスプレイ広告
pCSSの記述
まず、必要なCSSファイルjquery.pagepiling.cssフを読み込みます。次に、メニュー切り替えボタンやページセクション（#section1～4）のスタイルを定義します。必要に応じてこれらのスタイルをカスタマイズしてください。
<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<style>
p{
font-size: 2em;
}
.section{
text-align: center;
}
/* menu
* --------------------------------------- */
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
/* Section 1
* --------------------------------------- */
#section1 h1{
font-size: 24px;
font-weight: bold;
}
#section1 p{
color: #333;
color: rgba(0,0,0,0.3);
}
/* Section 2
* --------------------------------------- */
#section2 h1,
#section2 p{
z-index: 3;
}
#section2 p{
opacity: 0.8;
}
#section2 #colors{
right: 60px;
bottom: 0;
position: absolute;
height: 413px;
width: 258px;
}
/* Section 3
* --------------------------------------- */
#section3 #colors{
left: 60px;
bottom: 0;
}
#section3 p{
color: #757575;
}
/* Section 4
* --------------------------------------- */
#section4 p{
opacity: 0.6;
}
/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
#pp-nav.custom .pp-tooltip{
color: #AAA;
}
</style>
JavaScriptの記述
次に、必要なJavaScriptファイル、jquery-1.11.0.min.js、jquery.pagepiling.min.jsを読み込みます。$(‘ページ切替エリア’).pagepiling({切替オプション})でページ切替を行うエリアにページ数、ページの色等を設定します。
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Plugin intialization
*/
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['#BFEFFF', '#ee005a', '#2C3E50', '#39C'],
navigation: {
'position': 'right',
'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
},
afterRender: function(){
$('#pp-nav').addClass('custom');
},
afterLoad: function(anchorLink, index){
if(index>1){
$('#pp-nav').removeClass('custom');
}else{
$('#pp-nav').addClass('custom');
}
}
});
/*
* Internal use of the demo website
*/
$('#showExamples').click(function(e){
e.stopPropagation();
e.preventDefault();
$('#examplesList').toggle();
});
$('html').click(function(){
$('#examplesList').hide();
});
});
</script>
HTMLの記述
最後に、メニュー切り替えボタンやページセクションを定義します。メニュー切替ボタンや切替りページ（#Section1～4）を用意します。ここでも、必要に応じて変更してください。
<ul id="menu">
<li data-menuanchor="page1" class="active"><a href="#page1">1ページ</a></li>
<li data-menuanchor="page2"><a href="#page2">2ページ</a></li>
<li data-menuanchor="page3"><a href="#page3">3ページ</a></li>
<li data-menuanchor="page4"><a href="#page4">4ページ</a></li>
</ul>
<div id="pagepiling">
<div class="section" id="section1">
<h1>pagePiling.jsを使ってスクロールでページ切替</h1>
<p>1ページ目</p>
</div>
<div class="section" id="section2">
<div class="intro">
<div id="colors"></div>
<h1>2ページ目</h1>
<p>スクロールバーが表示されません</p>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>3ページ目</h1>
<p>フルスクリーンです</p>
</div>
</div>
<div class="section" id="section4">
<div class="intro">
<h1>4ページ目</h1>
<p>キーボードの↑↓でページが切替ります</p>
</div>
</div>
</div>
pagePiling.jsを使ってスクロールでページ切替を行うデモページ
こちらがpagePiling.jsを使ったスクロールでページ切り替えを行うデモページです。
pagePiling.jsを使ってスクロールでページ切替を行うデモページ
ソース元：pagePiling.js plugin | Create a stack of scrolling pages
以下がpagePiling.jsのソース元サイトです。
pagePiling.js plugin | Create a stack of scrolling pages
まとめ
pagePiling.jsを使うことで、マウススクロールやキーボード操作によるページ切り替えを簡単に実装できます。これにより、ユーザーに滑らかなページ遷移体験を提供することができます。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告
ディスプレイ広告
