Sridhar Katakam

Genesis and WordPress Tutorials

Full Screen Scrolling Sections in Genesis using PagePiling.js

by 22 Comments

PagePiling.js is a jQuery script for easily creating fullscreen sections that scroll one at a time for effective and engaging story telling.

In this tutorial I provide details of implementing PagePiling on the front page of a Genesis site having 4 widget areas.

We are going to set image backgrounds for first and third sections and background color for second and fourth.

Sections can be scrolled to using mouse/trackpad or by pressing up/down or left/right arrow keys. Another way of navigating across sections is by clicking on the circular navigation bullets floating at the right.

Each section will have a unique URL so visitors can directly jump to them from inner pages or elsewhere if necessary.

Screenshot on desktops:

pagepiling-section-3

Screencast:

Screenshot on mobile:

pagepiling-front-page-mobile

We shall set PagePiling to only work on non-touchscreen devices (i.e., desktops/laptops).

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

a) Upload jquery.pagepiling.min.js to child theme's js (create if not existing) directory.

b) Create a file named say, jquery.pagepiling.init.js in the same location having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Thanks for this! I’m having trouble with sections 3 and 4 running together. Although I have background image set for section 3 it doesn’t show and just overlays onto section 4. Any thoughts?

    Reply

  • Hi Sridhar

    Thank you for the tut – I really liked the effect. Could not get it working on Altitude pro but on Genesis child it worked fine. The one thing I noticed it that, when the page loads, it reveals the sections below section 1 until section 1 has fully loaded. That’s doesn’t look so nice so I’m thinking I should rather leave it.

    Not sure if there is a work around?

    Kind regards
    Amanda

    Reply

  • Hi Sridhar

    I have managed to install the plugin on my Altitude site using your code -thanks a mil. Just wondering how I can disable the function to work for less than 1023px – I did use the wp_is_mobile but it does not cover the instances where somebody might access the site from a non-touch device but with a reduced screen size – I’ve noticed the plugin and the responsive menu does not work together so nicely.

    I searched but only found code snippets for CSS media queries but obviously that won’t suffice.

    Thanks
    Amanda

    Reply

  • Hi Sridhar

    I have added the following to the jquery.pagepiling.init.js file:

    jQuery(document).ready(function($) {
    jQuery( window ).resize(function() {
    if ($(window).width() >= 1024) {
    $('#pagepiling').pagepiling({
    });
    }
    }
    });

    But it doesn’t work.

    Reply

  • Cool and easy to implement, thanks to you. I would love to see this done that still allows for continued scrolling to other home content and the footer.

    Reply

  • Hi Sridhar,

    How easy would this be to get it to work a) to display posts rather than sections and b) on Dynamik?

    Thanks,

    John

    Reply

  • Another problem I’ve noticed is that I get two responsive menu icons being created on smaller devices, yet there is only one menu. Any suggestions as to where this coming from?

    Reply

  • Could this be done using anchor links instead of widgets? Would like to implement it on a review page template?

    Reply

  • Thanks, Sridhar! A couple issues I am having though: 1.) My footer is not showing up on the home page. 2.) How can I also have the footer widgets display on the home page?

    401 Authorization:
    http://bridgetonhospi.wpengine.com/
    User: bridgetonhospi
    Password: 1b46a232

    Thanks in advance for any assistance.

    Best,

    -Brian

    Reply
    • >