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.

Old Pulteney Row to the Pole Screenshot

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.

Nike Screenshot

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 z-index CSS property. Once you’ve got your concept mapped out, all you need to do is animate it all using a little CSS3 and some Javascript, preferably jQuery. Since most sites already use jQuery for effects, it doesn’t add a lot of code bloat to a page. Throw in a little CSS3 transform and animate magic, and you’ve got a parallax site.

CSS3 Screenshot

Why Parallax, Why Now?
Users love parallax designs because they’re elegant, relatively simple and fairly impressive from a visual standpoint. While the idea behind parallax design has been used since the early 80s in everything from video games to animation, it’s only become popular on the web in the last few years. That’s because the standards and tools used to create these effects without Flash such as HTML5, CSS3 and full-featured Javascript framework libraries have taken awhile to mature and gain widespread acceptance. Parallax design enables webmasters to deliver a breathtaking visual experience and actually helps with SEO by improving the overall user experience for visitors.

Techrepublic Screenshot

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

About the Author

Web Design and Development company director with a passion for perfection.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top ↑