O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Finally, moving the earth

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) ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required