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 children to the rocket
element, and apply the style transform equal to the value rotate
to the first, and here is some more JavaScript math: the window's innerHeight
property multiplied by the number of rows, minus the rocket's bounding client rectangle...