O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating the rocket's movement function

Our rocket is the craft we are focusing on in our parallax movement. It should slowly move up or down as we scroll. We want it to slowly move towards the top of the viewport as you move up through the row elements. It will eventually reach to the top of the screen and its final target, the moon. As it moves up, it will also slightly rotate to the right as it arcs up into space. Altogether, this will create a really cool effect.

The function will be named moveRocket, and it will take the variable rocket and apply styles to its child elements. It is invoked during the updateElement function, so as you scroll through the page, this function will move the rocket.

In the first line, get the span elements that are ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required