‘Parallax scrolling’ is one of those phrases that sounds effortlessly futuristic and complicated, guaranteed to make anyone who utters it seem like a web design guru to all the uninitiated who hear it.
In actual fact though, the reality is not nearly as far out and radical as its science fiction like name, and Parallax scrolling turns out to be a web design tool that has its plusses and minuses and can be used to create some spectacular looking sites.
Parallax scrolling became a bit of a fad in the last few years, before the intensity of its uptake began to peter out. Some would argue that this decline in use shows that the technique is poorly suited to most websites, but others say that the decline is evidence that the initial ‘bandwagon jumping’ phase is over and people have realised that Parallax scrolling is simply a tool.
Like any tool, it is better suited to some jobs over others and is not suited to some at all.
So, what is the best way to go about utilising Parallax scrolling on a website?
What is Parallax Scrolling?
In essence, Parallax scrolling is an inventive method of page presentation, that allows designers to make the various elements of a page design (like different image layers and text on top of a background image) move in different directions and speeds when the mouse is scrolled.
Describing Parallax scrolling without providing some illustrations would be a little abstract, so take a quick scroll around these two examples, one for a swanky hotel and the other for a NASA collaboration, before we continue.
Parallax scrolling first came to prominence as a way of adding texture and a sense of depth, when it came to the graphics of the first 2D video games. The way that the foreground action moves significantly faster than the background in the early Sonic or Mario games is all down to Parallax design.
Why use Parallax Scrolling?
While utilising Parallax scrolling can certainly create an arresting design that is capable of stopping wandering users in their tracks and encouraging them to scroll through your content for at least a minute or two, does it have any proven benefits?
The following is a brief list of reasons that have been given for the use of Parallax scrolling in web design:
- The sideways scrolling action is a great way to present product lines in a way that allows users to easily compare specs and aesthetic qualities
- You can also show your products in 3D (like this leather bag manufacturer)
- A page using Parallax techniques could be an effective way of telling your company story
- The combination of Parallax scrolling, sound effects and cool graphics can create really engaging content to really draw people in
- This technique can also be used as a subtle yet effective way of guiding your visitors through your site, by using movement to really centre the users line of sight on the information that you really want them to notice
- Placing your call to action at the end of a Parallax section can be a powerful way of persuading users to engage further with your site
These are some of the tangible ways in which the incorporation of Parallax scrolling into your web design can lead to more visitors, more user interaction and more conversions.
What are the Problems with Parallax?
The uniqueness of the parallax user experience naturally means that the effectiveness of the technique is by no means universal. While certain kinds of content lend themselves to this kind of presentation, others do not.
As well as trying to pick what kind of content is presented in this fashion, there are also a number of potential concerns that should be given serious consideration:
- As you may have noticed from the examples provided so far, the page load times of Parallax pages can be significantly longer than other kinds of pages. This is understandable when you consider the amount of calculations needed for every pixel that is scrolled, but it may put some people off
- Whether or not these sites work on mobiles depend on a number of factors that can’t always be accounted for in the design stages
- A whole site designed with Parallax scrolling is only going to have one URL and will not feature meta-descriptions and title tags. Both these features limit the ability to effectively optimise the page for search engines (see this interesting post for tips on how to optimise Parallax content properly)
- There is a real question of how long these pages can hold the attention of the user. Scrolling is only interesting until it becomes an annoying impediment to gaining further information
It is worth emphasising again at this point that Parallax scrolling is only going to be effective in certain situations and for certain kinds of content. While there is no denying that the technique can create really striking page designs, even this will not jazz up certain kinds of content.
How to use Parallax Scrolling Effectively
So we know that Parallax scrolling functionality is definitely not the right option for every website and every business, but if it is the right option for you and your business, the next step is implementing it effectively.
There are great swathes of fantastic design guides for people who want to start using Parallax features, but before we get to those below, it is worth outlining a few general tips and essentials to keep in mind.
Some General Parallax Pointers
- Always keep your site architecture and SEO concerns in mind, there is no point in creating amazing content if people are going to have trouble coming across it on their travels across the internet
- It may not seem like a big difference, but whether you page is going to scroll up and down or left to right will have a big effect on the way users interact with the content. Side scrolling might be intuitively better for storytelling, while up and down would be better for the presentation of information
- Make sure you make your Parallax content mobile friendly or else you could be losing out on a significant audience
- Make sure the call to action is prominent and is a logical conclusion to the content, and not something opportunistically tacked on to the end
- Try and make sure the loading page is an interesting image to make users stick around
- Don’t overdo it!
Parallax Resources
Here are a few excellent resources to get you started on your Parallax journey:
- Building a Parallax framework for the telling of stories
- Creating slider content with CSS3 and JQuery
- Creating a Parallax background effect with JQuery
- A simple Parallax scrolling technique in HTML
At the end of the day, you may not end up using the Parallax scrolling all that much for your clients or your sites, but it is an indispensable tool to have in your kit. Being able to present certain kinds of content in this way is a guaranteed show stopper, if done properly.
Do you know of any other great Parallax scrolling resources or essential tips?
Featured images:
License: Royalty Free or iStock source: https://en.wikipedia.org/wiki/File:TWW_parallax_scrolling_sample_1.jpg
James Duval is a tech-obsessed blogger who loves all things internet. He recommends the Cheshire web design agency Greensplash for a great example of Parallax design.
