In this tutorial I show how Parallax.js jQuery script can be implemented in Genesis.
We shall register a "Featured" widget area, place a text widget in it, display it below header while specifying the URL of a image to be shown as the parallax background.
Also we will display another parallax image above the footer.
Step 1
Upload parallax.min.js to child theme's js
directory.
Step 2
Add the following in child theme's functions.php:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
[…] on October 02, 2016: It is recommended to follow https://sridharkatakam.com/parallax-scrolling-effect-genesis-using-parallax-js/ […]
What about making the widget area before content automatically pull the featured image of page?
Do you want the same content to be present on all pages in the Featured section or unique content for each page?
See https://sridharkatakam.com/featured-parallax-section-singular-pages-genesis/
Is it just me or is the Parallax.js jQuery script from Pixelcog is much more “laggy” (less smooth scrooling) than the JS from Parallax Pro theme? Even on the demo website (http://pixelcog.github.io/parallax.js/) of the script the top and bottom edges of the parallax section are flickering when scrolling.