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's bottom value, divided by the window's innerHeight value, all subtracted from the integer 355 and divided by 3. Then, append the string deg to the end. This magic algorithm makes the rocket's rotation a factor of if its location in the scrolling.

rocket.getElementsByTagName("span")[0].style.transform = "rotate(" + (355 - (((window.innerHeight * (document.getElementsByClassName("row").length) - document.getElementById("rocket").getBoundingClientRect().bottom)/window.innerHeight))*3) + "deg)";

The next line is similar; in fact, I want you to copy and paste it. Then, change the part on the left of the equals sign to get the elements by the tag name I, selecting 2 in the array, and to the right of the equals sign, change the integer from 355 to 259. This slightly modifies the rotation of the fa-flame I element as it is a different size and orbit.

rocket.getElementsByTagName("i")[2].style.transform = "rotate(" + (259 - (((window.innerHeight * (document.getElementsByClassName("row").length) - document.getElementById("rocket").getBoundingClientRect().bottom)/window.innerHeight))*3) + "deg)";

The next line will cause the rockets to move up through the viewport as you scroll up. Instead of selecting the style's transform property, select the style's bottom property. Set it equal to 65 multiplied by the rocket's distance from the bottom divided by the value of the window's innerHeight property multiplied by the number of row elements, and then append the string % to the end. Have a look:

rocket.getElementsByTagName("span")[0].style.bottom = 65 * (document.getElementById("rocket").getBoundingClientRect().bottom)/ (window.innerHeight * (document.getElementsByClassName("row").length)) + '%';

The final function, now that we have moved the heavens, is to move the earth. This function will shrink the earth elements and rotate them as the rocket zooms up into space or as the user scrolls from the bottom to the top. The earth will not be noticeable at first as the rocket will launch from the ground, and the earth is still a very large blue blob obscured in the background.