Parallax With a Purpose

During the past year, the parallax Web trend has really taken off. It seems that the most popular way to showcase your site's contemporary relevance is to use all the bells and whistles of the modern era without the restrictions of that evil iOS enemy called Flash. Ironically, NeoPangea saw a similar trend years ago with Flash; it was a trend that redefined the Web, and more than a decade later, people are feeling that it's somewhat outdated. In reality, what's really happened is that Flash has finally found its place.

Having come from a background in post-production for video, I find it interesting to observe the evolution of HTML-based motion on the Web. It's a very different animal from broadcast video, but the progress made online in the last few years alone is pretty amazing; even with all the browser compatibility issues, people really seem to be pushing boundaries.

Since parallax is all the rage at the moment, there are far too many sites doing it for the sake of doing it with no real purpose. Much like the fashion industry, new trends pop up all the time, but just because those tight pants look good on the mannequin, it doesn't mean they'll look good on you. The choices we make with our clothing are based on facts we know about ourselves: our personality, our size, height, and weight. We make informed decisions based on things that are defined and things we want the outside world to perceive. Why should an online persona be any different?

Frankly, parallax shouldn't be the first thing you consider when designing and building a site; there are far too many important factors to consider to effectively communicate information to your audience without worrying about how sexy your site is. While parallax can be sexy, in this case, sex doesn't always sell.

Rather than lambast sites that I think really butchered the trend, I’d like to discuss a few recent favorites and point out a few reasons why I think they’re successful.

Oakley Airbrake MX
Oakley did an amazing job with this site, judiciously using parallax effects to showcase a real-time demo of their product. They kept it simple, eliminating bulky info text blocks and focusing on the core features of the goggles to bring the product to life for their audience.

Drug Bless America
This site utilizes info graphics and parallax effects to allow the user to interact with content in an engaging manner. The animations triggered by the parallax movement, along with mouse interactivity, tell a story. User-controlled motion design enables the information to resonate with the audience in a meaningful way.

D'Angelico Guitars
This site is one of my all-time favorites. D’Angelico doesn't only limit the user to parallax, but they also use traditional top navigation. When you experience the parallax, you get a sense of the rich history of the product. It’s a visually dynamic timeline that evokes the personality of the product and the people behind it.

Recently, NeoPangea completed a couple different sites that effectively utilize parallax scrolling. The first site is a rich, sci-fi history of robots to promote The Incredible Bionic Man, a television event by the Smithsonian Channel. Featuring a timeline that spans from the early 1900s to the present day, our Rise of the Robots interactive used a left-to-right parallax approach to create an experience that feels familiar and natural while still disseminating a robust selection of content.

The second parallax effort we produced is a densely-populated timeline that focuses on 10 days of American life without electricity for the National Geographic Channel film, American Blackout. The scenes in this interactive were built with multiple offset layers, so when the user scrolls through them, there’s a sense of depth and dimension that creates the illusion of reality. We opted for a parallax approach to complement the film and to translate its cinematic mood to an online environment. Each scene feels as if it's a moment frozen in time during the blackout. Every slice of this grim scenario was meticulously engineered to create both an extension of the film and a unique stand-alone experience by presenting additional content and personal accounts that take place during the event.

When looking through each of these sites, you can see that the parallax does not define the site, but rather serves as a means to enhance the experience for the audience and present content in a meaningful way. There's nothing wrong with using the latest trendy technologies, but it's important to make sure that they have substance and are being used for a purpose, unlike like that awful sweater hiding in your closet that mom bought you for Christmas. Although it can be easy to forget, one of our jobs as digital creatives is to steer our clients away from trends if they aren't part of a solution that best fit the goals of the project so that we can focus on creating experiences that are timeless.