Parallax Scrolling - The Design Technique to Create Dynamic Web Pages

The Pros and Cons of Parallax Scrolling based website design

There used to be a maxim that stated that all your critical content should be shown above the fold. For websites, this meant that all the meaty content and important messages should appear at the top of your site without requiring your visitors to scroll.

Now though, not only are deep pages accepted – they are now actively encouraged. In part, this is down to the creative use of parallax scrolling.

What is Parallax Scrolling?

Parallax scrolling is a web design technique (using HTML5 and CSS3) that creates an illusion of depth and movement. When a visitor to your site scrolls down the page the background image on the page moves more slowly than the images in the foreground. Used in the right way, this produces a stunning effect that can create a real sense of differentiation from other sites.

Storytelling with Parallax Scrolling

Parallax Scrolling works particularly well if you’re telling trying to tell a story. Storytelling can make an incredible impact on any business and sharing the stories that make you unique can be aided by this visual web design technique. You can take your website visitors on a journey. With each scroll down the page, the next chapter of the story is revealed.

You can become the director of your story. You can decide when your visitors will see the next element of the story. Maybe you have a case study to share that shows how you helped one of your clients. Each step can be shared independently, each scroll, revealing another part of the story.

Or perhaps you have a process you’d like to share? Anything that is linear in nature lends itself to the parallax scrolling technique. 

The Good, The Bad & The Ugly

Parallax scrolling sites can work well, but as the technique has become easier to replicate, many well-intended parallax sites end up looking awful. Some particularly bad examples have even caused a motion sickness-like response from some visitors.

The key message is this – don’t use parallax design for the sake of it. Use it for a particular purpose. Think it through and plan it accordingly.

The Pros of Parallax Design

•    Create visually appealing sites that have the ‘wow’ factor.

•    Allows you to adopt a storytelling approach to your website.

•    Make your pages ‘stickier’ by encouraging your visitors to scroll through the entire page.

•    Create a sense of curiosity and differentiation.

•    Direct your visitors to call to actions.

The Cons of Parallax Design

•    Won’t work well on all devices. Parallax can work on mobile devices, but it has to be developed independently to do so.

•    Because of the use of multiple images – your site might suffer from slow loading times.

•    If you have a single page approach to your entire site – you essentially only have one landing page, which makes your SEO efforts difficult.

•    Again, if you opt for the single page site approach, you can’t use internal linking to direct to other relevant pages.

A Hybrid Approach to Parallax Design

Many of the ‘pure’ parallax sites take a single page approach, but there is another way. You can apply parallax design to your home page, while still having other pages that conform to more standard web page design principles. This hybrid model removes any of the SEO and internal linking issues we mentioned.

Here are some parallax-based sites to inspire you.

Dangers of Fracking  - https://web.archive.org/web/20160105010921/http://www.dangersoffracking.com/  

Regardless of your views on Fracking, this site takes visitors on a highly visual storytelling journey. It’s a great example of how parallax can be used to lead someone through a linear story.

Whiteboard.io - http://whiteboard.is/  

This example makes creative use of video that plays in the background. It’s also a great example of a hybrid parallax site that also includes links to more conventional pages.

British Legion - http://poppyspend.britishlegion.org.uk/   

This is another great example of the creative use of Parallax scrolling. This time, the scrolling asks you to follow the journey of a single Poppy to tell the story of how the money raised from selling Poppies goes.

Over to you?

Have you come across any great examples of Parallax design? If so, please share it in the comments. And yes – that includes your sites as well.