Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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