pagePiling.js – Create a scrolling pile of sections

After FullPage.js and MultiScroll.js, Alvaro Trigo now presents pagePiling.js, a plugin which allows creating a totally new way of single page scrolling websites. With pagePiling.js the sections are piled one over another which makes the whole scrolling experience exciting and it is a new appealing way to present information. This plugin is a great choice for creating product/service landing pages and it is very easy to use.

PagePiling is created just to work. After the “invasion” of the CSS3, the web has changed dramatically and there a great deal of new opportunities for front-end developers in terms of creating effective and appealing way to present and organize content. But there is a huge issue for the web developers – the compatibility. Internet Explorer is still the biggest foe for the developers as the latter want their applications and web sites to run smoothly everywhere. There are users still using IE8 despite the fact that it is quite old, especially when it comes to web development. Bearing it in mind, Alvaro put a great effort to make sure that pagePiling.js works also in old browsers e.g. IE >=8, Opera 12…

What’s more, this plugin also includes a touch detection so it will work the same way in touch devices. Pretty sweet, isn’t it? Have a look below to see how to use and download.

How to use it

Link the needed files:

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

You will only need to create a wrapper to contain the page sections and then add a `section` class for each section of the site. For example:

Section 1
Section 2
Section 3

To initialize the plugin all you need to do is including the needed js and css files and call the plugin inside a `$(document).ready` function using the selector which will be used as a wrapper.

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

Documentation & Questions

For more documentation about the plugin, check the github repository.

Demo  Download