Parallax scrolling, one of the hottest trends in web design right now, is something you probably don’t even realize you have already experienced. The amazing thing is that it is triggered by a visitor simply scrolling through a website.
What Is Parallax Scrolling?
Parallax scrolling is a special scrolling technique used in web design wherein background images move by slower than foreground images, creating an illusion of depth on a two dimensional site.
Traditional thinking in the field of web design held that your website should be designed in a way to minimize the need for the user to scroll and to keep the most important information “above the fold” (kind of like a newpaper when folded).
Alot has changed in recent years and if you think about it, we live in a scrolling culture. Web users have become accustomed to scrolling down the page to get that absolute last piece of information. Herein lies the best part of parallax scrolling. It is a simple motion that you are already accustomed to. This dynamic experience has brought about some breathtaking websites, and is a growing trend in the world of web design.
How It All Started
Originally the process was known as “parallaxing,” and it was used long before the Internet was even an idea. There were many early adapters, but the one in particular that stood out was Walt Disney. Disney was one of the great pioneers of “parrallaxing” and the technique helped him to bring to life many of his great classic movies such as Snow White, Bambi and Fantasia. “Parallaxing” was later used in video games where the movement of several layers aided in the creation of great games such as Mario Cart, Sonic the Hedgehog and Street Fighter.
More recently, the process of “parallaxing” was introduced to the modern web where it is referred to as parallax scrolling. In web design, parallax scrolling is used to introduce new images or key information when a user scrolls down the page. It works by moving the different elements at various speeds as you scroll through the page to create an illusion of three-dimensional space.
Five Sites That Got It Right
Because parallax scrolling is a new and somewhat novel technique, lots of web designers have incorporated in sites just because it is “cool.” Unfortunately, that doesn’t always result in the best user experience. In my opinion, less is more in web design and parallax scrolling should be used when and where it makes sense, not just becaue it is the latest thing. The following five websites do just that and have incorporated parallax scrolling in a way that makes sense and adds value. Some utilize the technique to the extreme, while others have employed it to add to user experience without any potentially overwhelming effects.
Nintendo
This site implements an interesting left to right scroll function that clearly shows off the different content elements. The result? This site mirrors the effect of video games, pure and clean fun!
Oakley
Oakley uses parallax scrolling to demonstrate their product. This example is a more traditional website layout than what you’ll see on sites like Nintendo’s. When the user scrolls, different content populates giving the user an insight into what goes into the manufacturing of the product, and what the product can withstand.
Spotify
The Spotfiy site is minimalistic, yet still does what it is inteded to acheive through the implementation of parallax scrolling.
Life of Pi
This example has quickly become an office favorite. As one of the most intricate and extraordinary sites out there, the website for the movie “Life of PI” uses Parallax Scrolling to deliver a breathtaking experience and highlighting the different levels of video production. All of this happens while giving the user a “behind the scenes” look.
Think Geek
How do we follow up a showstopper like Life of PI? At the opposite spectrum of course! Think Geek has taken a very minimalistic approach to parallax scrolling. (Hint: Scroll all the way to the bottom and watch the background morph) The way the designer has employed this technique certainly reflects the ethos that “good design is transparent.”
Keep These Tips In Mind
The list of things that can be done with Parallax Scrolling is immense, however there are some major Do’s and Don’ts when it comes to the technique.
Don’t
- Don’t over do it! You never want to overstimulate your website visitors. Always design with a clear path in mind. Your goal is to engage the user, not confuse them with an over-abundance of text or motion. After all, too much motion can make them dizzy!
- Don’t forget your CTA’s. You already have the user engaged with scrolling effects, why not add in a call to action to further entice them into your site’s interior?
- Don’t build a parallax scrolling website just to build one. Have a purpose behind every design decision you make, scrolling techniques included.
Do
- Always make it engaging! Parallax scrolling keeps the user moving through the site, but if the content is dull, it will easily deter the user from continuing.
- Always remember mobile users. With more and more people viewing the web from their tablets and phones, your website should be responsive. If the technique is getting in the way of the viewing experience, the technique should be sacrificed, not the viewers’ experience.
- Always employ parallax scrolling to enhance your site, not replace it. Focus on enhancing the content that you have, but keep in mind that just because parallax scrolling can condense your site to a single page, doesn’t mean it should.
What do you think?
After experiencing the full potential of parallax scrolling in our “best of the best” roundup and going over some of the do’s and don’ts, what do you think? Is this a trend that will keep on skyrocketing and completely revolutionize the way we interact with websites, or will it fizzle out and become obsolete? Let us know in the comments!
