Universal Parallax in Genesis

I have recently come across a parallax Javascript aptly named Universal Parallax that works beautifully on all devices incl. tablets and mobiles. In fact, this is the only cross-platform or universal parallax script as far as I know that works for background images.

If you are looking to move multiple elements at different speeds on scroll, Rellax is the way to go.

In this tutorial, I share the steps to register a Home Hero widget area, display it below the header and set up a parallax background for it using Universal Parallax in Genesis.

Live Demo

While the tutorial has been written for Genesis Sample 2.6.1, it should work with a few adjustments in any Genesis theme.

Step 1

Upload universal-parallax.min.js to child theme's js directory.

Step 2

Create a file named say, parallax-init.js in the same location having:

new universalParallax().init();

Step 3

Install and activate Genesis JS / No JS plugin.

This is to prevent the flash of nav menu items which affects the parallax effect.

Step 4

Edit child theme's functions.php.

a) Inside genesis_sample_enqueue_scripts_styles() add the following at the end: