Creating Web Animations

Chapter 13. Parallax Scrolling

For many practical reasons, our UIs are designed to be two dimensional and flat. Once you throw in meaningful content, some navigation, and other doodads to make your application usable, adding any more dimensions simply gets in the way and becomes a distraction. Despite the stranglehold two dimensions have on what we create, there are subtle and effective ways of sneaking an extra dimension in here and there.

In this deconstruction, I will show you one effective way where you can simulate depth by implementing something known as the parallax effect. Before I bore you by explaining what parallax is, let’s look at an example instead. Load up your browser, and visit http://bit.ly/parallax_scrolling, or take a look at the following video:

In the example or video, you’ll see some content that will require you to scroll to fully reach the end of the page. In the background, you will find various shapes. When you scroll the page, cool things happen!

Notice what is happening to the background while you are scrolling. There’s a big yellow circle that moves much slower than your scroll speed, a blue square that scrolls much faster than your scroll speed, and a green hexagon shape (which you can barely see) that moves in the direction of your scrolling. All of these variations in speed create the illusion of depth, making it look like the various ...