April 1, 2016

Understanding Parallax

Arguably the most popular current design trend is parallax scrolling. You would have seen this on your travels across the internet, most likely overused or unnecessary but pretty nonetheless. Web designers and developers are always looking for new, engaging visual styles and functionalities and parallax scrolling has quickly risen in popularity, opening up new possibilities for interactive and delightful user experiences.

What is Parallax Scrolling?

The name and effect originated with 2D side-scrolling video games (like Super Mario). These games used different background image scrolling speeds to give the illusion of depth during gameplay.

In parallax the background usually moves slower than the foreground, making it seem further away. The effect creates a perspective shift in the way it is viewed. One of the aims when implementing parallax effect is to create multiple viewpoints from which to observe an object against the background, adding depth and three-dimensional qualities.

Parallax on the web follows the same concept where the background moves at a different speed to the rest of the page. It is an alluring visual effect and allows for highly creative applications, particularly for visual storytelling online.

Tips for Successful Parallax

Just like with anything, if you overdo it then it won’t look good. You don’t want to make your page too complicated but instead use parallax for a clear, definite purpose or as a subtle effect to enhance visual attractiveness and provoke curiosity. Parallax can cause slow load times, especially when overused, which may frustrate visitors who will leave before they’ve seen it.

Used well it can reinforce your site’s credibility through innovative interaction and aesthetic appeal. It can encourage users to scroll the entire page, which decreases bounce rate, and can be used to direct attention where it should be.

Parallax has a particular affinity with online storytelling as it allows for a wide variety of interactivity and animation that can produce visually arresting and engaging pathways. The best examples captivate their audience and lead them through the story/website.

Parallax Examples

While these examples have used parallax heavily (they may take a minute to load) you can see how interesting and intriguing the effect can be.

http://www.flatvsrealism.com/

http://porschevolution.com/

http://www.sbs.com.au/theboat/