Welcome to the first part of my deep dive into parallax.
In this part we’re going to talk about what parallax is,
how it relates to the web,
and whether it’s just a fad.
You’ve probably experienced this phenomenon driving in a car looking off towards the horizon.
The further away an object is the slower it appears to be moving, maybe even hardly at all. While closer objects, appear to be moving faster.
Parallax is a visual artifact of moving around in a 3d world.
This observation is useful in the context of 2D animation. One can easily recreate this effect by varying the speeds at which elements move based on their layering order.
Parallax is a simple, cheap way of adding subtle animation.
This was incredibly useful in cartoons to create elaborate backgrounds bringing a scene to life.
An example of this is Disney’s Bambi which came out in 1942. Parallax is used extensively in the beginning as well as throughout the film to make the camera movement more believable.
With the arrival of any new medium, people look to past media for inspiration.
Early TV shows were basically conversions of radio to a visual format.
Parallax is often associated with video games, but in early video games the visuals were very simple due to hardware limitations.
As the technology matured and became more capable we saw them raise the bar, using rich visual techniques of more advanced media, like film.
If you look at the original Mario games in which the background elements, clouds and bushes, move with the foreground, there is no parallax.
Compare this to the early Sonic games where they have complex animated parallax backgrounds.
It may be subtle but adds value to the aesthetic of the game.
Just like the arrival of games the early web brought many ideas from existing media.
And like video games, as the hardware and software improved the web became a more visual medium and the visual language of animation became much more prominent.
The primary interaction on an HTML website is often scrolling vertically along the y-axis. This is much like the camera movement of a side scrolling video game which often move along the x-axis.
The shared characteristic of a single axis of motion made it easy for web developers to include the same parallax effect found in games to websites.
The use of parallax attached to scrolling on the web became a popular trend probably most notably starting with Nike’s better world campaign which utilized the effect in 2011.
It later evolved into other scroll based effects, such as drawing SVG content on scroll or triggering an animation when it comes into screen. While these aren’t parallax, because of their association with scrolling on the web the term parallax became sometimes generalized to refer to any scroll based animation.
As with any new design concept it requires some vetting. Is it just a fad, like web 2.0’s glossy buttons. Or will it continue to become more relevant to designers.
To determine it’s value I think it’s important to break down parallax into what it fundamentally is.
Parallax is an animation technique.
It’s a valuable way to create the illusion of depth through animation.
In this context scrolling is the input method used to scrub the playhead of the parallax animation.
Like with any animation technique there will always be situations where it can be abused.
A designer has to determine on a case by case basis if each feature adds value to the experience.
The popularity of parallax may ebb and flow, but as an animation technique it certainly has it’s place and will continue to add value to animation. As we’ve shown it’s really just another tool in your arsenal of creative solutions rather than a fad that will be completely irrelevant.