How to move an image from bottom to top when scrolling down in Genesis

January 19, 2015 by Sridhar Katakam 1 Comment Favorited: 5 times

In a recent project that I completed, keyot.com, the requirement was to move an image of a rocket as the user scrolled down the homepage.

This is how I did it using Stellar.js.

Step 1

Uploaded jquery.stellar.min.js to child theme's js directory.

Created a file named home-non-mobiles.js in the same location and initialized Stellar like so:

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

Already a member? Log in below or here.

One thing I did notice on the live site was that Chrome’s Better Pop-Up Blocker app blocks the animation on the rocket.