pagePiling.jsを使ってマウススクロールでページ切替を行う方法をご紹介します。
フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの「↑」「↓」キーでページ切替ができます。
Contents
pagePiling.jsを使ってマウススクロールでページ切替を行うCSSの記述
※jquery.pagepiling.cssファイルを読み込みます。メニュー切替ボタンや切替りページ(#Section1~4)のCSSを記述します。必要に応じて変更して下さい。
<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>
pagePiling.jsを使ってマウススクロールでページ切替を行う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>
pagePiling.jsを使ってマウススクロールでページ切替を行う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 plugin | Create a stack of scrolling pages
以下がソース元サイトです。
pagePiling.js plugin | Create a stack of scrolling pages
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告