Presenting pagePiling.js, the new jQuery plugin to create a scrolling pile of sections

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.

View demo

Created to “just work”

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>

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();
});

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.

Donations admited

If anyone is so kind to invite me for a coffee I will appreciate it a lot 🙂 Donate

  • Tofanelli

    Man…. beautiful beautiful beautiful beautiful plugin you done!!! Congratulations!!!! Small question, is it possible to add a footer or it will follow the rules of my page?

    • Alvaro

      I’m glad you like it 🙂 And well, you can add it outside the plugin’s wrapper if you want, probably fixed or with an absolute position, but the plugin doesn’t offer that option.

      • Tofanelli

        Swell…. I already did it here…. now i’m struggling here to add a nice menu flyout (( http://callmenick.com/2013/04/22/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation/ )) on it… i really loved it!!! It’s pretty awesome!!! =)

        after 10 hours of struggle, any success atl all, but I will =)… eheh

        thanks very much mate! =)

        quick question… are you brazilian?

        • Alvaro

          I hope you luck with it 🙂
          Nop, I’m not, I’m Spanish.

          • Tofanelli

            thanks!

            Sorry.. because your name is very common in Brazil…

            Cheers =)

  • Tofanelli

    Alvaro,

    quick dumb question ((from whom knows nothing of jquery =))…

    is it possible to add in certain sections an horizontal section??

    In example, if I have a “”food”” section, then, if i click to go to left goes to “restaurant” or if I click to the right goes to my places…. is there a way to do this?

    Yes, I’m completely aware that alread has the “horizontal scroll” on the zip file, but in this case, i want to use both ways at the same time…. is it possible? If yes, mind to guide me please??

    Cheers =)

  • Actarus

    Hi Alvaro,

    Amazing Plugin, thank you!!!

    Is there a way to make things moving automatically, like an auto play ?

    Thank you for your help.

  • Hi Alvaro,

    I am trying to put this on my personal website. However, I am running into some issue. I added and imported the needed files. Added the required divs but nothing happens. Actually, after doing all that, my website stops scrolling. Any help will be highly appreciated.

    • Alvaro

      You are probably doing something wrong. Read carefully the documentation and take a look at the examples avaialble with the download.

  • Hi Alvaro,
    I’m trying to replicate http://www.hugeinc.com home page with it’s page piling at the beginning and a normal scrolling page at the last point. I was thinking of using your pagePiling.js and to deactivate/remove it when the last content in the list is displayed and to activate/display it when the scroll bar reaches the top. What’s the best way to do it? Is there any function in your pagePiling.js to remove all the events associated to your plugin?

    Thank you in advance!

  • Many thanks for it! 😉

    Your example of the Scrolling Page like Huge Inc doesn’t work properly on mobile devices at the last point, with the long page. I think that you have just forgotten to reactivate the scrolling bar. I tested it on iPad.
    Great work! 😀

    • Hi Alvaro, Do you have any suggestion to make scrolling the last content? THK

  • JerryR

    Hi Alvaro,
    Very nice one page idea! Is there any way that you can add unique sub-menus to each of the sections? Currently any additional menus you add in sections 2, 3, etc. of the page gets replaced by the menu you added in section 1. Thank you very much for your reply!

  • Irfan Ali

    Hi Alvaro,
    i want to change the animation and make it like fadein and fadeout smoothly.. how can i do that.. thanks in advance.

    • Alvaro

      Sorry this is not a fading plugin. The plugin won’t provide any option for it.

      • Irfan Ali

        Thanks for the reply .. but when i download it there is a demo and in one slide there is about change the animation but no way how we change the animation.

  • Irfan Ali

    plz reply me as soon as possbile

  • Nishant Sharma

    Hi, a question regarding scrollable content. Is there anyway to link some of the section from menu on top?
    Lets say, I have a sections under scrollable div, gallery and specification. I want to link it to menu above. I tried many things but don’t seem to find a way to scroll directly to that div which is inside scrollable content and is much below. Hope you reply soon

    • Alvaro

      I’m afraid the plugin doesn’t provide any way to do it.

      • Nishant Sharma

        Thanks for the quick reply. I have done it by myself. On clicking that custom link, I made it move to that scrollable page, then gave it a delay and took href value and moved it to that particular div

      • Nishant Sharma

        Hi, I am getting into another issue. Is there any way to remove horizontal touch drag? It is colliding with my slider touch. When i use horizontal drag from phone…page slider page change too with slides.

        • Alvaro

          Nop, the plugin doesn’t provide any way for it. If you really need it contact me for an urgent request.

          • Nishant Sharma

            Thanks…somehow we managed to do it from here. Some adjustments here and there. 🙂

  • JuanFra Gancia

    Such a great script, wish to see more scripts made by you.
    Thanks!

  • vijay

    Hello Alvaro, I have a question regarding scrollable section.
    Currently every sections are ‘translate3d(0px, 0px, 0px)’ when i scroll page down then the previous section is move top ‘translate3d(0px, -100%, 0px)’ right, But i want to by default only active section is translate3d Y 0px and rest sections are ‘translate3d(0px, 100%, 0px)’ when i scroll page down then the next section is move from 100% to 0px ‘translate3d(0px, 0px, 0px)’, Is it possible? please help me for this.

    I have attached a example screenshot for more understanding please find the attachment. https://uploads.disquscdn.com/images/9091cdce887a97e5d2b0a3adffb2fcd8c353844e048bfea6a407ac29136e29d7.jpg

    • Alvaro

      Not possible I’m afraid. pagePiling.js doesn’t provide such option.

      • vijay

        Yes i know pagePiling.js doesn’t provide such option.But can you please help me for this like something change code in your js and create slide bottom to top according to my requirements.

        Or if you have any other suzation for this please let me know.

        • vijay

          I am waiting for your reply.

        • Alvaro

          I’m afraid I do not provide support for specific websites or issues outside what the library is intended for.

  • freegraph

    Hey there, first of all want to thank you for great plugin. and have one qeustion: Im using your pagepiling with four sections and on fourth seciton I have normalu scrolling section. point is that it works only on second attempt (when i scroll to the last page for first time it doesnt let me scroll down THROUGH section. but if I move up and then come down. it works . can you help me?

  • Juan Antonio Centeno Córdova

    Hii I´m trying to add the class “pp-scrollable” when the window´size is less than 1100px. This is my code but it doesn´t work. ¿Any help?. Thanks!!
    if ($(window).width() < 1100) {
    $( "div.section" ).addClass( "pp-scrollable" );
    }