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:
Screencast:
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.
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:
