Let's keep going down this rabbit hole of functions I've created. We have called a function that does not exist yet: cloudCall. This function takes the cloud elements, detects the size class we have added, and uses it to determine how fast the cloud should move across the screen. We are going to create an assumption in our parallax 3D effect that the bigger objects are closer and will therefore move faster through the viewport than the slower clouds. The function takes a variable we will identify here as clouds. Take the classList array, and we will operate on it. Start the function by looping through the clouds' classList array.
For each one, use a switch and case test for the Font Awesome class to determine the font's size. Do you remember? It's fa-2x, fa-3x, fa-4x, and fa-5x. For each case, call yet another function (have I used the term "rabbit hole" already? What about "labyrinthine"?) as equal to the value of the cloud object's style left property.
The function call is named setElementLeftPostion and receives the cloud variable and an integer ranging from 1 to 5. Did you notice there isn't anything for the cloud without an fa-size value? There isn't one, but you could send one in the default case. This function can be seen in the following code sample:
function cloudCall(clouds){
for (var k = 0; k < clouds.classList.length; k++)
{
switch (clouds.classList[k])
{
case 'fa-2x':
clouds.style.left = setElementLeftPosition(clouds,1);
break;
case 'fa-3x':
clouds.style.left = setElementLeftPosition(clouds,2);
break;
case 'fa-4x':
clouds.style.left = setElementLeftPosition(clouds,3);
break;
case 'fa-5x':
clouds.style.left = setElementLeftPosition(clouds,4);
break;
default:
clouds.style.left = setElementLeftPosition(clouds,.5);
;
}
}
}Hang in there! We really are past the difficult parts now. We only need to create three more functions, and these are going to be small functions. The first is the last one we called, setElementLeftPosition.