Published on October 23rd, 2012 | by Justin Revell
The Wonders of Parallax Design
Web design fads wax and wane so quickly that it’s nearly impossible to stay on top of them all. Before you know it, a design craze has come and gone. However, one trend that won’t be going out of style any time soon is the push towards greater site layout interactivity that doesn’t tax an end user’s CPU. Steve Jobs signaled the change with his now-famous rant against Flash. One of the most fashionable ways to make sites more interactive and appealing is parallax design. Also known as parallax scrolling, it’s rapidly become a fixture on the web design scene.
What Is Parallax Design?
Simply put, parallax design is all about creating pseudo-3D effects through the use of optical trickery. It’s accomplished by combining slow-moving background images with faster-moving foreground CSS elements to achieve a perceived depth of field in a page. In other words, it’s a cheap and effective way to create a 3D look within a 2D environment. Full-blown 3D rendering is computationally intensive and doesn’t work well with browsers running on older hardware. Even relatively new PCs with modern processors and loads of RAM feel the strain from 3D interactive environments, to say nothing of mobile devices.
Real World Examples & Implementation
One of the most famous examples seen thus far and arguably the test case that brought parallax scrolling to a wider audience was the Nike Better World showcase. The site creates the illusion of perspective change as a user scrolls down. Since then, numerous high-profile brands have used the effect for portfolio sites, AJAX-based games and landing pages. Some of the more notable examples found in the wild include the Mercedes-Benz launch page for the new A-Class, the Peugot Hybrid4 graphic novel page, Never Mind the Bullets, the Mario Kart Wii micro-site and ASICS’ Stop at Never.
How Parallax Design Works
Though it may look complicated, parallax designs are actually fairly simple to pull off with a modicum of web design knowledge. Essentially, you’ll use one static background or a background stitched together from numerous images. Then, you’ll layer images on top of that background using the
Why Parallax, Why Now?
Incorporating the Technique
You don’t have to be a design wizard to create stellar parallax effects of your own. A few simple jQuery plugins can more or less automate the process. Alternatively, any web design outfit worth its salt will be able to do it for you if you’re not up to it. The point is that it’s easy to implement and doesn’t have to cost much in terms of time or money. Just don’t overdo it, as a little parallax goes a long way. Regardless, it’s a technique well worth adopting for a variety of current and future projects.