Presenting pagePiling.js – [jQuery plugin]

Alvaro Trigo

Updated on: February 08, 2024

After launching fullPage.js and multiScroll.js, now I present pagePiling.js. A new way to create a single scrolling page in which sections are piled one over another creating an original effect to present the information.

This jQuery plugin creates a stack of pages accessible by scrolling. Sections will be one under another producing a cascade effect when scrolling.

See Demo

View on GitHub

Created to “just work”

It is quite easy to find pretty interesting effects and animations nowadays in sites such as [coDrops](It is quite easy to find pretty interesting effects and animations nowadays in sites such as codRops. The web is experiencing a huge change with CSS3 and new possibilities for front-end developers are rising to create amazing effects. Yet, there’s a problem nowadays for web developers: compatibility. We want our site/web app to work in any kind of device and we still having our biggest enemy out there: Internet Explorer. It might seem IE (Internet Explorer) 8 its quite old in terms of web developing, as it was presented for the first time in 2008 and 6 years has passed since then. But companies still wanting compatibility and IE 8 and 9 still having some percentage of users out there we can not leave outside the equation. With this in mind, and having suffered myself the consequences of trying to make things work for old browsers, pagePiling.js was designed to work in old browsers as well. (IE >=8, Opera 12…) But not only that, it also includes touch detection to work in the same way in touch devices.

How to use it

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:

<div id="pagePiling">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>
Code language: HTML, XML (xml)

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();
});
Code language: JavaScript (javascript)

Update:
I noticed Thumblr started a few days ago to use a very similar approach to this plugin:
https://www.tumblr.com/

Documentation & Questions

For more documentation about the plugin, check the github repository. I encourage you to use the issues forum to report bugs or ask any question related with the plugin. Also, don’t forget to search for your question before opening a new thread as they might have been already asked previously.