To fix the error, start by creating a new function called updateElement. You may recall that we added this to the body's onscroll method. Now that we have distributed our objects in a random fashion on the screen and created a smooth scroll effect, we need to work on making things change at different rates as we scroll through the rows. This is the meat and potatoes of the parallax effect. In the end, when you scroll through the page, the objects can be programmed to move at different velocities.

This part will involve some fancy footwork and will be explained in a few steps, but it will be lightweight and easy to extend later as you please. The following code contains a function that will be run on every scroll, so we want to keep it as light as possible.

Inside the new updateElement function, in the first line, we will create a call to another function, sending an anonymous callback function. This function will get the elements we need to move and send the function to apply the styles. The anonymous callback function will take two variables, theObject and increment, and set the theObject variable's style position to be relative and the style's left value to send variables to another function called setElementPosition, which we will define shortly:

function updateElement() {
    function (theObject,increment){
        theObject.style.position = "relative";
        theObject.style.left = setElementLeftPosition(theObject,increment);
        });
    }

Next, we will call two more functions. The functions create some unique movements on each scroll that cannot be boiled down to a general function like the clouds and other moving objects. The first, called moveEarth, will send as a variable the element identified by the id earth, and the second function, called moveRocket, will take as its variable the element identified by the id rocket:

        moveEarth(document.getElementById("earth"));

        moveRocket(document.getElementById("rocket"));

The last part of this function will loop through the Font Awesome I elements inside the DIV element identified by the id stars, and each one will set the style opacity to equal the product of the window's pageYOffest value divided by the window's innerHeight property, multiplied by the total number of elements identified by the class row, and subtracted from 1, and from this final value, 0.3 will be subtracted. This for loop is the last part of the updateElement function. I know it's not easy to read such a description of the math, but you can look here at the code sample to see what I'm building:

for (var i = 0; i < document.getElementById("stars").getElementsByTagName("i").length; i++)
{
document.getElementById("stars").getElementsByTagName("i")[i].style.opacity = (1-(window.pageYOffset/(window.innerHeight*(document.getElementsByClassName("row").length))) -.3);
}
} //closes the function

Next, we need to fill in the functions we just referenced; otherwise, the parallax scroller will not be fully operational. The first one, called getMovingElements, takes the variable callback and starts by looping through the elements in the document identified by the row class name. What you will do in this section is determine whether each of the row elements is currently in the viewport. You could add or remove object sets here and control their detection and vertical and horizontal movement.

Inside the for loop, we need to test whether the row it is looping through is actually inside the viewport. Start with this conditional statement: "if the window's pageYOffset property added to the window's innerHeight property is greater than the current row element's offSetTop (distance from top) property and if the window's pageYOffset value is less than the current row element's offSetTop value added to two-thirds of the value of the window's innerHeight property, do the following":