In today’s era of low attention spans, you have to be very creative to create a truly memorable experience. There are plenty of techniques you can use for that, and one of the most useful is the scrolling parallax effect. This technique allows you to adjust how your visitors receive your content to create a more responsive web design.

In this article, I want to review  parallax scrolling, provide practical tips on how to design great parallax effects, and share a few great examples with you.

How it works

The word “parallax” is derived from the Greek word “parallaxis” meaning “alteration.” Parallax scrolling is a design technique that helps designers to create a faux-3D effect. As users scroll the page, different layers of content or backgrounds move at different speeds, and this creates a 3D effect for users.

Parallax is not a new technique. It has been around for years. Many of you can remember Super Mario Bros — game designers used parallax to create a sensation of depth. But there’s a reason why parallax became a trend in the web design world — scrolling is easier than clicking. A well-designed parallax effect engages users to scroll for more information.

Parallax scrolling is a special technique used in web design where background images throughout a web page move slower than foreground images, creating an illusion of depth in a 2D scene. Image by Pete Cockram.

Why should we use parallax

Takes a story-telling approach

Design is all about communication. When we design websites, we want to communicate with our visitors and tell a compelling story about our product, service, and brand. Parallax allows us to immerse visitors into unique experiences. It’s possible to create a one page website where visitors can read an entire story on a single page.

Makes page visits last longer

Reducing the bounce rate is one of the goals to be conscientious about in web design. Bounce rates are the percentage of site visitors who either hit the “back” button or close the tab after checking just one page of your website. High bounce rates hurt your search ranking, so any actions you can take to bring that rate down is worthwhile. Parallax gives the user the type of dynamic experience that tends to keep them on the page longer.

6 things to consider when designing a parallax website

1. Measure load time

Website page load speed is a critical factor in web design. Parallax scrolling is considered a heavy effect — it usually relies on both CSS and JavaScript to perform its action. As a result, it may make browser loading time longer than it should be. Slow loading time can hurt your search rank and lead to a loss in traffic. Thus, every time you want to introduce a nice visual effect, be sure to check your site’s performance after that.

2. Use parallax scrolling sparingly

Always try to incorporate parallax scrolling in a way that makes sense and adds value to your visitors.

Parallax does not work for all types of content. Generally, parallax works well for relatively small pages such as landing pages and one page websites. So if you design an online shopping experience, parallax might not be the best choice for you.

Also, it’s important to understand your audience and the way they will interact with your website. If you expect to have returning visitors, parallax scrolling might also not be the best choice. No matter how impressive your design is for first-time visitors, the animation effects will look predictable for returning visitors, and some of the visitors will be annoyed by animation (especially if the effects are time-consuming to view).

3. Design predictable scrolling

Scrolling is an inherently natural behavior for web visitors. Web visitors are confident in their scrolling skills, and they can be easily frustrated if some website tries to change the commonly-accepted behavior.

Many websites that use parallax effect introduce scroll hijacking — visitors lose control of the scroll, and the site defines the speed at which users should consume content. At best, scroll hijack confuses visitors, and at worst, drives them away from a website.

4. Try to minimize the parallax effects on mobile

Parallax rarely works well on mobile — not because the effect cannot be optimized for mobile viewport but simply because it does not look good on small screen size. That’s why it’s better to either minimize or remove parallax scrolling for mobile users.

5. Consider accessibility

Parallax can easily create bad UX for people who suffer from motion sickness. If you want to create a good user experience for this group of users, it’s better to provide an option to turn the animated effects off on your websites.

6. Search Engine Optimization

Parallax pages present a lot of challenges when it comes to ranking the site. That’s why it recommends using parallax only on specific parts of your website.

MOZ wrote an excellent piece on search engine optimization for parallax. Read it if you want to achieve good results in terms of SEO.

Ten Excellent Parallax Websites

Below I’ve compiled ten great examples of websites that use the scrolling parallax effect to tell stories to their visitors:

1. Firewatch

Firewatch uses parallax at the top of its home page to create a genuine sense of depth. As you scroll down, you start to believe that you dive into details.

Another great thing about this site is that it does not hijack scroll — the users can scroll the page at their normal speed. 

Gif of parallax scrolling on the firewatch website
Firewatch uses parallax to create an engaging scrolling experience.

2. Every Last Drop

Every Last Drop is an excellent demonstration of the rule “Show, don’t tell.” Instead of telling the user the importance of using water, the website shows how much water we consume daily. As you scroll down, you see scenes from your daily life together with information about water consumption.

Every last drop website using parallax scrolling to create visual storytelling
Every Last Drop is an excellent example of visual storytelling.

3. The Boat

The Boat is a perfect example of visual storytelling. This website takes visitors on a journey online. The entire story consists of 6 chapters, and as you scroll down, the parallax makes you feel the story — the illustrations paired with the text and audio immerse you in a visual narrative.

The boat website uses parallax scrolling to create an engaging story experience
The Boat creates an unforgettable visual journey using parallax effect.

4. BeerCamp

BeerCamp’s designers found an unexpected way to use parallax. The website uses a zooming effect to captivate visitors around one central focal point. The site consists of 5 pages; each page is represented as a layer of content that zooms-in as you scroll the page. Paired with bright colors and bold typography, this parallax effect creates a truly memorable experience for the site’s visitors.

Gif of the zoom in parallax effect that Beercamp uses on their website
BeerCamp uses zoom-in parallax effect.

5. Marcin Dmoch

Marcin Dmoch is an art director who decided to use a parallax effect for his web portfolio. The website is divided into three sections — About, Work, Contacts. The parallax is used to connect different parts — each section is pinned and unpinned as the user scrolls the page.

Gif of website seperating different website sections with parallax effects
Marcin Dmoch uses parallax to visually separate different sections of his website.

6. Anton & Irene

Anton & Irene website is an excellent example of pairing great aesthetics with excellent functionality. When you visit a site, you see the silhouettes of two persons. As you start scrolling down, the silhouettes move away and give more room for the valuable information.

Gif of anton and irene website and how parallax effects pair well with the aesthetic appearance
Anton & Irene pairs great aesthetics with excellent functionality.

7. Hot Dot

All examples that we saw above have one thing in common — the parallax effects were created using a vertical scroll. But Hot Dot follows an entirely different approach — it uses a horizontal scroll. As you scroll, the pages move from left to right, and visitors see beautiful transitions with a smooth 3D parallax effect.

Gif of a website using the horizontal parallax effect
Hot Dot uses horizontal parallax effect.

8. Porschevolution

Porschevolution is a one page website that shows the evolution of Porsche design since the very first days of the carmaker. It gives visitors a unique ability to check-out how Porsche design transformed over time and envision the upcoming model by 2020. Page navigation is achieved via a smooth page sliding effect created using parallax.

Porcheevolution website using parallax effects to storytell the company history
PorscheEvolution is an excellent example of storytelling.

9. Feed Music

Feed Music aims to create immersive digital experiences. A split-screen layout features images paired with contextual information. Designers use parallax to pin information details to the image — as the user scrolls the page, they see new information blocks and the relevant visual image.

Feed music uses vertical scrolling for a storytelling exeperience
Feed Music triggers visual effects with vertical scrolling.

10. Melanie Daveid

Melanie Daveid’s website is another example of one page website that pairs creativity with functionality. As you scroll the page down, you see sections with detailed information about Melanie’s experience, her works, and her contact information. At the time when you reach the bottom of the page, you will be delighted with a nice visual effect.

Gif of Melanie David website using parallax effects for decorative and functionality purposes
Melanie David uses parallax both for functional and decorative purposes.

Conclusion

Parallax scrolling can give your web page a sense of depth and life that a static website wouldn’t otherwise have. A well-crafted parallax effect can easily help your website to stand out and create a more interactive experience for your visitors.