pagePiling.jsを使ってマウススクロールでページ切替を行う方法｜DAD UNION

pagePiling.jsを使ってマウススクロールでページ切替を行う方法をご紹介します。
フルスクリーンでスクロールバーが表示されず、マウスのトラックボールやキーボードの「↑」「↓」キーでページ切替ができます。

Contents

pagePiling.jsを使ってマウススクロールでページ切替を行うCSSの記述
pagePiling.jsを使ってマウススクロールでページ切替を行うJavaScriptの記述
pagePiling.jsを使ってマウススクロールでページ切替を行うHTMLの記述
pagePiling.jsを使ってスクロールでページ切替を行うデモページ
ソース元：pagePiling.js plugin | Create a stack of scrolling pages

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>