Parallax Scrolling – What, Why, and Why Not

parallax icon

Parallax scrolling is an animation technique used to mimic three dimensions on a two dimensional plane. This is accomplished by moving a number of background layers more slowly than the foreground. You’ve probably seen this in action if you’ve ever played a 2D platform videogame like Super Mario Bros or Castlevania!

In web design, the term “parallax” has taken on a much more broad definition.  While some of the initial parallax sites weren’t much more than multiple elements on a webpage scrolling at different speeds and/or directions relative to the browser window, there are now an assortment of techniques that all fall within the catch-all term “parallax scrolling” including:

  • Content segments that scroll while backgrounds remain fixed, which take on more of a slideshow effect
  • Different elements on a page scrolling at different speeds either vertically or horizontally
  • A series of images that have visibility toggled as the page scrolls to display complex animations
  • The hijacking of the scrolling event to move the page in unexpected ways

The first three examples would probably best be seen in various segments of this Oakley webpage and the fourth can be illustrated courtesy of Nintendo.

That’s totally cool, but why should I use parallax scrolling?

Aside from the awesome factor, the most common reason to utilize parallax scrolling is to encourage viewer participation and generate interest and engagement with your message/service/product.

You can use parallax when you want to:

  • Add motion and depth to a page
  • Add visual interest
  • Encourage scrolling
  • Create a narrative effect and control the delivery of your message

PARALLAX ALL THE THINGS!?!

Not quite. While parallax scrolling is an interesting technique, and does have a lot going for it, there are some drawbacks that need to be considered:

  • Anything other than simple vertical parallax scrolling can be very time consuming to create.
  • Some parallax effects can be difficult to implement on tablets and on phone consistently. Typically, fallbacks need to be planned, which can cause exponential increases in project time.
  • Image heavy pages tend to have much larger file sizes which can lead to annoying loading bars or wait times.
  • The potential to abuse and overuse the parallax effect is strong, and overuse can cause usability issues and impair user experience.
  • Single page sites tend to be more difficult to optimize for SEO and might limit the number of terms or phrases that could be targeted.
  • Single large pages can skew analytics.

Whoa… It seems like the cons outweigh the pros… but this is somewhat deceptive. When considering parallax scrolling, the key is to keep in mind what the overall site objectives are. For example - let’s say you’re adding some simple parallax effects to a one-off landing page on your site that you’re driving traffic to via adwords. In this case, you’re far more worried about getting people to read your message and fill out your form than you are about SEO. As long as you can keep down the hours by not going overboard parallaxing all the things, the benefit of parallax could far outweigh the disadvantages.

So, is parallax scrolling the perfect answer for all sites? No, but parallax scrolling is an interesting technique that can bring some serious visual interest to a site. As to whether or not it’s right for your site, that’s up to you.  

Comments
Blog post currently doesn't have any comments.
Security code