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.
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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.
Hi Sridhar,
Does not seem to show background image in Firefox.