pagePiling.js – create scrolling pile of sections

Create a scrolling pile of sections with pagePiling.js.

pagePiling.js – scrolling sections

You will need to include the JavaScript file jquery.pagepiling.js (or the minified version jquery.pagepiling.min.js) and the css file jquery.pagepiling.css of the plugin, as well as jQuery. Optionally, you can add the jQuery UI library in case you want to use other easing effects apart from the ones included in the jQuery library which are the linear or swing effects.

Scrolling pile of sections
Scrolling pile of sections

Setup

bower install pagepiling.js

Sample

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagepiling.js"></script>

...


<div id="pagepiling">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

A simple init:

$(document).ready(function() {
  $('#pagepiling').pagepiling();
});


A more complex initialization with all options set:


$(document).ready(function() {
  $('#pagepiling').pagepiling({
	menu: null,
        direction: 'vertical',
        verticalCentered: true,
        sectionsColor: [],
        anchors: [],
        scrollingSpeed: 700,
        easing: 'swing',
        loopBottom: false,
        loopTop: false,
        css3: true,
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['section1', 'section2', 'section3', 'section4']
        },
       	normalScrollElements: null,
        normalScrollElementTouchThreshold: 5,
        touchSensitivity: 5,
        keyboardScrolling: true,
        sectionSelector: '.section',
        animateAnchor: false,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){},
	});
});

License: MIT

Demo

https://alvarotrigo.com/pagePiling/

GitHub

https://github.com/alvarotrigo/pagePiling.js

See also

jQuery preview URL – mini preview of the link target on hover

SingleJS – a jQuery plugin for single page websites

CSS3 and jQuery single page scrolling plugin – singular.js

Vue.js scroll to element solutions

jQuery scroll to anchor – jquery.anchorScroll plugin

Enjoy!