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

Creating functions for the element types


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