Sridhar Katakam

Genesis and WordPress Tutorials

Universal Parallax in Genesis

by 2 Comments

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • I have the same problem. I changed this line background: url(images/hero.jpg) no-repeat 50% scroll / cover; for this background: url(../images/hero.jpg) no-repeat 50% scroll;. This works on firefox but don’t show the background in chrome so I add this line background-size:cover;. I’m not sure if it’s correct but works for me…
      Chrome v.72.0.3626.109
      Firefox v.65.0.1
      I hope this helps…

      Reply
    • >