Designing with Parallax Scrolling: The Do’s and Don’ts
Parallax scrolling is a creative tool for designers to create 3D experiences on a two-dimensional screen. The parallax scrolling effect can add depth and dimension, giving the user an immersive, engaging experience—something brands constantly strive to achieve!
What is Parallax Scrolling?
Parallax scrolling is a web design technique where elements appear to be moving at different speeds to produce a 3D scrolling effect.
Similar to the depth perception of driving in a car where close objects pass by the vehicle fast while things in the distance pass slower.
There are several types of parallax scrolling patterns, but they all use separate layers of content to produce the desired effect. By setting different scrolling speeds for each layer, designers create the illusion of objects moving around the screen as the user scrolls.
Want to create a parallax scroll in your design? It’s easy in UXPin! Get a 14-day trial and see how to do it quickly.
A Brief History of Parallax Scrolling
Parallax scrolling dates back to the 1930s as a motion picture technique for animated films like Disney’s Snow White and the Seven Dwarfs. In the early 1980s, video game designers used parallax scrolling to create 3D effects for 2D games, most notably 1981’s Jump Bug.
It wasn’t until 2007 that parallax scrolling made its web design debut using Javascript and CSS 2 on Internet Explorer 6. With the introduction of HTML5 and CSS 3 in 2011, parallax scrolling effects became easier to produce and thus grew in popularity.
Today parallax scrolling can be incredibly complex, where web designers create immersive visual experiences.
When to Use Parallax Scrolling
Although it’s a highly effective tool for creating unique user experiences, designers must consider the downsides of parallax scrolling—it can have adverse effects!
Page Speed
Parallax scrolling is a page speed killer, especially for websites on shared hosting plans. According to Google, two seconds is the threshold for eCommerce websites. But for most other websites, the average is between 3-6 seconds.
So, when it comes to eCommerce, what are your goals? To impress the user with your web design skills or sell products? Unless you’re able to optimize your page speed, you might want to avoid parallax scrolling for eCommerce or websites where speed matters.
Check out this article on how to improve page speed for parallax scrolling.
How Does it Affect the Content?
Another question you must ask before adding a parallax scrolling effect is, how does it affect the content?
For example, on the Collage Crafting website, designers chose to add a parallax effect for the point of sales outlets.
But it’s difficult to read some of the content as it gets cut off at the top and bottom as you scroll. This isn’t a good user experience as the user cannot consume all of the content properly.
If you need users to read your content, keep it simple! There are other ways designers can present content to users and still maintain legibility.
Does Your Parallax Scrolling Effect Distract or Annoy the User?
Parallax scrolling has its place. For a creative agency, it makes sense to impress potential clients with your web design skills.
But if I’m looking for car insurance quotes, do I really want to waste time scrolling through some fancy parallax effect to get to the quotation form? Probably not!
For competitive industries where users want information fast, parallax scrolling could adversely affect bounce rates and conversions.
Always think about the content, context, and how the website is trying to serve the user.
9 Examples of Great Parallax Scrolling
We’ve found ten great examples of parallax scrolling. One theme that stands out for most of these websites is how designers have used parallax to help tell a story.
As you will see from these examples, parallax can be a powerful storytelling tool, but it takes a lot of careful thought and planning.
NIIKA
NIIKA is an Australian-based creative agency. The hero image features a beautiful abstract design with some subtle movement. Abstract objects move about the page while large moving headlines display the agency’s services as you scroll.
Further down, another parallax scrolling effect uses a custom map fixed in the background with the agency’s contact details scrolling over the top.
NIIKA also uses a parallax effect for its “WORK WITH US” call to action near the footer.
Even though NIIKA uses a lot of copy in its parallax scrolling, you never lose critical information or messaging.
CANN
CANN is an American cannabis-infused tonic drink producer. The website uses an immersive, seamless parallax scrolling effect to tell its brand story.
The developers have done a fantastic job optimizing CANN’s website to accommodate such a complex parallax scrolling effect.
The copy and content are legible, and the parallax effect helps tell the brand’s story, complete with bubbles representing an effervescent tonic. The web design also uses color effectively to represent CANN’s three flavors.
Web designers have also done a fantastic job with CANN’s store, ditching fancy effects to optimize the design for conversions.
Toy Fight
Toy Fight is a UK-based creative agency. The website features a simple yet elegant parallax scrolling effect on the home page, with a clear call to action appearing in the center of the page.
Toy Fight uses a parallax effect on each page to transition from the hero into the page’s content. These transitions are clever because the animations are somewhat silly, while the rest of the content explains the company’s services and past work—almost like pulling back the curtain.
Toy Fight’s website is a fantastic example of how parallax scrolling can help tell a story.
Garden
Garden is an award-winning Portuguese design studio. The website uses a beautiful parallax effect for the hero image of a garden sunset with the sun going down as you scroll.
Further down, lines and icons appear as if being sketched as you scroll. The subtle effects draw your eyes to important information, like Garden’s services and headlines.
Smart Move
Smart Move is an initiative to attract and retain expertise in the Greater Örebro Area in Sweden. The website’s home page features an impressive horizontal parallax scrolling effect showcasing Örebro’s features and culture with relevant links to each.
The parallax effect cleverly takes you through several Swedish settings, including nature, commerce, home life, entertainment, and nightlife.
Bertani Wines
Bertani is an Italian winemaker. The website features a horizontal parallax effect with images, videos, and copy to tell the brand’s story.
The effect uses a mix of horizontal and vertical movement to take you on a journey through the brand, its vineyard, and its wines. Bertani’s designers have done well to balance a complex horizontal parallax effect with compelling storytelling. Everything makes sense, and the messaging stands out.
Quentin Goupille
Quentin Goupille is a freelance art director, illustrator & filmmaker from Paris. His portfolio uses parallax scrolling effects to help tell the story behind each project.
Each page is different, and Quentin uses parallax effects to take the user on a journey through each of his films. The result is impressive as it helps showcase Quentin’s storytelling and creativity.
Quentin Goupille’s website is an excellent example of how creatives can use parallax effects to showcase their work in a unique and engaging way.
Crazy About Eggs
Crazy About Eggs is a Dutch egg farmer passionate about free-range and ensuring their chickens live a healthy farm life.
The website uses subtle parallax scrolling effects to introduce small elements and subheadings. The company’s egg boxes remain static as you scroll to halfway while the product’s benefits scroll on either side.
This is an incredibly creative way to keep the brand front and so that the user becomes familiar with the product. Next time the user is in the supermarket, they’ll likely recognize Crazy About Eggs’ packaging.
Kibana
Kibana is a resort in France with accommodations, events spaces, gardens, a market, and other outdoor experiences.
The hero image features a text introduction. As you scroll, you’re immersed into one of Kibana’s beautiful gardens and instantly wish you were there!
As you scroll further, subtle movements draw the user’s attention to Kibana’s key features and beautiful images. Near the footer, designers use a clever parallax effect to introduce Kibana’s team.
Summary
Parallax scrolling is a powerful tool, but designers must use it to help tell a story rather than frivolous animations to impress users. Using parallax as effectively as the examples we showcase above takes a lot of time, collaboration, and planning.
Always keep the user’s needs in mind and don’t use parallax effects if they adversely affect the user experience.
Using UXPin to Design Amazing User Experiences
UXPin is a powerful collaborative design tool, allowing you to invite the entire team to contribute to a project’s success. UX designers can use UXPin to design immersive visual experiences and user interfaces.
Start creating beautiful user experiences with a free 14-day UXPin trial today!
