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
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.
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
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.