User journeys with with Parallax scrolling

Friday, July 25, 2014 by Richard Howe

Parallax scrolling is a special technique created with a combination of HTML5, CSS3, jQuery and JavaScript where in essence, background images move more slowly than images in the foreground of a webpage, creating an illusion of depth and realism.

Javascript tracks when the users scroll and move various items by the appropriate amount, so that different elements move into the centre of the screen at different times. Parallax scrolling has been around in web design since 2011 (and in gaming design for much longer), but has gained more popularity recently. But is it now an overused effect already past its sell-by date or is there more to parallax scrolling than its gimmicky appearance?

Parallax perfect for storytelling

Because the very act of scrolling enables users to be taken on a journey ‘down’ through one or more pages, parallax scrolling can be used very effectively as a storytelling device. 

So whether you want to show a process, a system, take your visitors on a virtual tour or tell the story of your company, you can do so in a creative and engaging manner with this technique. 

Using graphic elements such as vector illustrations and photography as well as careful use of typography and text elements, your users will be captivated by what’s being revealed, and they’ll be more than happy to continue scrolling and find out what’s going to ‘happen’ next.

One-page parallax websites

Most parallax scrolling sites are comprised of one long page. Although this has advantages in terms of allowing for flow and visitor direction, it has some disadvantages too, mostly in terms of SEO (only one url, one h1 tag, no internal linking and so on), and load time. Parallax websites are typically neither responsive nor mobile-friendly and are expensive to develop and build.

Having said that, they can also be fun, fabulous and incredibly immersive! As with so many things in web design, there are some sacrifices and decisions to be made. Depending on your audience, you might find that the benefits of parallax scrolling far outweigh the negative aspects.

Snowfall and parallax scrolling

Named after a Pulitzer Prize-winning article in ‘The New York Times’ about an avalanche at Tunnel Creek, ‘snowfall’ is a design concept that combines parallax scrolling, video and graphics with more traditional journalism and layout. You can see the article at nytimes.com

As an answer to the problem of bringing journalism up to speed with design and web advances, and keeping audiences engaged and informed, this technique is incredibly effective, and not unlike a well-crafted iBooks Author book in look and feel. If your website has a lot of text, graphic and video content, snowfall could be exactly what you need to keep your users focused and interested.

Tips for parallax design

If you do decide to go ahead and create a website utilising parallax design, here are a few tips to help you along the way:

  • Only use it when it can really add something to your site, your message and to your audience. If it doesn’t add to the user experience, you could use your money to develop your site in other ways.
  • Start off simply. Making things too complicated can leave the reader confused and not sure where to look.
  • Make it fun and enjoyable for your reader – like an adventure through your site. Add a few surprises here and there.
  • Do think about storytelling and what happens when the user gets to the end of the scroll.
  • Include calls to action at strategic points if relevant.
  • Don’t forget to test on older browsers.
  • Don’t overdo it, and remember that parallax effects are not a replacement, but an enhancement of quality content.

The jury’s out on whether parallax scrolling is here to stay or whether it’s just a passing fad, but when it’s done well, the effects can be extraordinary. With some creative flair and technical prowess, parallax scrolling effects can create something truly memorable and sharable, a fully immersive and engaging experience for the user.

Your comments

Post has no comments.

Post a Comment


Captcha Image

Request a callback

Filter by category

Post archive

I couldn't recommend Richard more highly. He has far exceeded our expectations in designing and building our second company website.

We still use the first one for a different aspect of our company and customers always take the time to comment on how wonderful and easy to use it is.

Please feel free to get in touch for further details.
Cocktail bar web design

Nick Ford,
Red bus Events

What's next?

Get in touch with us today on 01865 522525 and let's kick-start your project.

Colour Rich custom website design

Web design trends in 2020

Wednesday, March 18, 2020

Web design trends in 2020Web design has changed an awful lot over the years. Most people would assume that web design is as changeable as fashion design - a constant flux of styles and trends which are hot one second and not the next. But, one of the biggest overarching movements within web design has been the growing dominance of focusing on user feedback to guide design decisions.  Read more

© Copyright Colour Rich. Privacy