pagePiling.js Introduction: How to Achieve Smooth Page Switching with Mouse Scroll

Introducing how to switch pages with mouse scroll using pagePiling.js.
By using this library, you can switch full-screen pages without showing the scrollbar, using a mouse trackball or keyboard arrow keys.

CSS Description

First, load the required CSS file `jquery.pagepiling.css`. Then, define styles for the menu toggle buttons and page sections (#section1–4). Feel free to customize these styles as needed.

<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 Description

Next, load the required JavaScript files: `jquery-1.11.0.min.js` and `jquery.pagepiling.min.js`.
Using `$(‘Page Switching Area’).pagepiling({switching options})`, set the number of pages, colors, etc., for the page switching area.

	<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 Description

Finally, define the menu toggle buttons and page sections. Prepare the menu toggle buttons and the switching pages (#Section1–4). Feel free to modify them as needed.

	<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="section" id="section1">
	    	<h1>Switch Pages with Scrolling Using pagePiling.js</h1>
			<p>First Page</p>
	    </div>
	    <div class="section" id="section2">
	    	<div class="intro">
	    		<div id="colors"></div>
	    		<h1>Second Page</h1>
	    		<p>No Scrollbar Displayed</p>
	    	</div>
	    </div>
	    <div class="section" id="section3">
	    	<div class="intro">
	    		<h1>Third Page</h1>
	    		<p>Full Screen View</p>
	    	</div>
	    </div>
	    <div class="section" id="section4">
	    	<div class="intro">
	    		<h1>Fourth Page</h1>
	    		<p>Switch Pages with Keyboard ↑↓ Keys</p>
	    	</div>
	    </div>
	</div>

Demo Page: Switching Pages by Scrolling with pagePiling.js

Here is a demo page where you can switch pages by scrolling using pagePiling.js.

Demo Page: Switching Pages by Scrolling with pagePiling.js

Source: pagePiling.js plugin | Create a stack of scrolling pages

Here is the official source site for pagePiling.js.
pagePiling.js plugin | Create a stack of scrolling pages

Summary

Using pagePiling.js makes it easy to implement page switching via mouse scroll and keyboard operations.
This provides users with a smooth page transition experience.

　
※Please use at your own risk if reusing.
Please do not reuse the Google Analytics tag inside the head tag of the demo page.