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.