Create a new function called moveEarth
and give it the variable earth
. First, define the earth variable's style fontSize
property to be equal to the window's innerHeight
property multiplied by the number of row
DIV elements, and subtract from it the element identified by the id
rocket's bounding client rectangle's bottom property and then divide it by the window's innerHeight
value; multiply the whole thing by 100
, and then append the string vw
so that the size is pinned to the viewport width. The function and its first line look like this:
function moveEarth(earth){ earth.style.fontSize=(((window.innerHeight * (document.getElementsByClassName("row").length) - document.getElementById("rocket").getBoundingClientRect().bottom)/window.innerHeight) * 100)+"vw"; }
The second line of the moveEarth
function will set the earth's style left value to be equal to exactly the value of the fontSize
previously defined, except change 100
at the end to the number of row...