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
Behind the Scenes of NewZealand.com
Vertical Scrolling Examples
Horizontal Scrolling Examples
