HBO GO, a great example of horizontal parallax scrolling

HBO’s GO website is gaining well deserved recognition regarding their implementation and spot-on execution of horizontal Parallax scrolling / design. As part of my research in an earlier blog post, the overwhelming trend is to use Parallax scrolling for vertical story telling as few if any of the horizontal implementations seem to deliver the same experience. HBO has solved this by using super high resolution images and just the right amount of moving parts (layers) thus creating a smooth effect not often seen in most horizontal attempts.

This has certainly sparked our creative juices here at OneSpring as we work on several Parallax concepts for both internal and external usage.

The Parallax Design / Scrolling Experience

I have to admit these are one of my guilty pleasures; in my down time I’m often scouring the web to find the latest Parallax indulgent, with our own addition only a few weeks away. As with any great experience the key to an effective implementation is to focus on a compelling concept while fleshing out the story. This ensures the technology and design are merely passengers and not the primary drivers of the experience.

So what exactly is Parallax design? The wikipedia answer “is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines”. Now you may be curious how this pertains to web design. Simply put, parallax web design is the technique of placing multiple images, videos or objects on different dimensional planes that scroll or move at varying speeds creating an illusion of three dimensional existence in a two dimensional browser.

Although parallax scrolling has been around for nearly 30 years in the video game world, it made its first appearance on the web about 5 year ago in some FLASH instances. With the recent advances in browser support for HTML5 and CSS, designers are now able to create these interactive experiences without the bloat of FLASH, igniting an explosion of parallax sites and the latest in web design trends.

I’ve compiled a number of sites as well as various tutorials on how to implement your own parallax design.

Tutorials

Smashing Magazines’ behind the scenes of Nike’s Better World.

Smashing Magazine’s Parallax Tutorial

Web Design Shock

Behind the Scenes of NewZealand.com

Vertical Scrolling Examples

Activate Drinks

Nike Better World

NewZealand.com

Ben the Bodyguard

Manufacture d’essai

netlash bSeen

Atlantis World’s Fair

iutopi

Lenovo RapidBoot

Horizontal Scrolling Examples

Lee Clothing