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.js – Create a scrolling pile of sections

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.

Related post:  4 Free Ebooks from Packt Publishing – HTML/CSS/JavaScript/Hadoop

How to use it

Link the needed files:

<link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />
<script src=""></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() {

Documentation & Questions

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

Demo  Download

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.