Parallax Scrolling is a great movement effect that creates a sense of depth in a 2D environment. Although parallax websites are a new trend online the concept has actually been around for a very long time. If you’ve ever played the original Super Mario Brothers game, you were immersed in the world of parallax design without even knowing it!
What is it?
Parallax is basically the varying apparent position of an object relative to the background behind it based on the viewing position. Getting back to Super Mario Bros, they use this concept to create a sense of depth – as Mario moves across the screen at a steady speed, the background moves at a much slower speed to create a sense of depth to help differentiate the foreground from the background. You can see another simple example of this effect by looking at the speedometer in your car. Sitting in the drivers seat you can clearly see you are travelling at 80km/h, but look at the same speedometer from the passengers seat and you will see a different reading.
Parallax Design on the Web
Over the past year we have seen a very big increase in the number of parallax websites – this is partly due to the release of HTML 5, but mostly CSS 3. The way the effect is achieved online is usually with a vertical scrolling website where the background scrolls at a slower speed than the foreground and main content. One of the best and most creative parallax designs I’ve seen is a journey through the Life of Pie movie: http://journey.lifeofpimovie.com/#!/mysterious-island. Here is an out-of-the-box parallax design created by Lexus: http://www.lexus-int.com/amazinginmotion/
Why use it?
Parallax website design offers some incredible opportunities to show off your content in a unique and engaging way. One of the biggest benefits of parallax design is the level of interaction users experience – something that is extremely hard to obtain with traditional web design methods. The way the content is displayed is affected directly by the speed and position of the user’s scrolling. The possibilities are limited only by the creativity of the designer.
If you don’t know already, one of the biggest drawbacks with parallax scrolling websites is the SEO implications. Parallax designs contain the majority of the content (sometimes all of the content) on 1 single page and 1 single URL. Google and other search engines like to see specific content reside on their own individual pages, meaning 1 page = 1 topic. Let’s take a fictitious medical clinic that has a parallax design, and assume that they offer 3 services: Massage Therapy, Acupuncture and Physio. If this medical clinic has a URL of www.medical123.com, all content about massage therapy, acupuncture and physio will all appear on medical123.com. When a user searches “acupuncture clinic”, do you think a search engine would rather return a page about massage therapy, acupuncture and physio (medical123.com) or do you think it would prefer to rank a website with the url medical987.com/acupuncture-clinic higher, as it has a page specifically dedicated to the content the user is searching for?
There are many other SEO implications and disadvantages associated with parallax design so you should be very conscious when deciding to take this route. If you value design, interaction and user engagement over searchability, parallax design can be a great avenue for you. Despite the SEO limitations, there are of course ways to maximize your on-page SEO and best practices to follow (read more about On-Page SEO).