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:
Screenshot on 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.
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.