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

Updating elements on the scroller


To fix the error, start by creating a new function called updateElement. You may recall that we added this to the body's onscroll method. Now that we have distributed our objects in a random fashion on the screen and created a smooth scroll effect, we need to work on making things change at different rates as we scroll through the rows. This is the meat and potatoes of the parallax effect. In the end, when you scroll through the page, the objects can be programmed to move at different velocities.

This part will involve some fancy footwork and will be explained in a few steps, but it will be lightweight and easy to extend later as you please. The following code contains a function that will be run on every scroll, so we want to keep it as light as possible.

Inside the new updateElement function, in the first line, we will create a call to another function, sending an anonymous callback function. This function will get the elements we need to move and send the...