Modern websites are much more than just a collection of pages with information. They’re carefully choreographed experiences, in which visitors travel from one point of interest to another.
Site creators have always relied on some kind of scrolling effect (looking at you, parallax) to create more dynamic and smooth experiences in web design. Simple scrollbars might be ancient history, but innovative scroll effects never get old.
Here, we break down one of the most popular types of scrolling, parallax scrolling, along with examples to push your creativity, and a general set of recommendations on how to implement scrolling effects properly. (Related: How to use our custom CSS)
What we'll cover
Why you should add scroll effects to your website
"People don't scroll" is a popular myth among product creators. But Jared Spool, one of the most competent experts on usability, will tell you it's just not true. His team conducted a series of tests that asked users to search a website for answers to a specific set of questions. By measuring the distance between the top of the page and the links users clicked, Spool and his team found that people are absolutely fine with scrolling—even if they say otherwise.
In fact, long scroll pages typically work better for users. The rise of mobile devices and social media’s popularization of infinite scroll made scrolling a natural interaction pattern. That's why modern websites no longer aim to put all essential information at the top of the page (in the area previously known as "above the fold") but rather distribute it naturally on the page to create proper scrolling behavior.
Here are a few benefits of adding scroll effects to your website:
Reduce the cost of interaction. Product designers use the concept of interaction cost to describe how easy or hard it is to interact with a product. A high cost of interaction means the user has to invest a lot of effort to interact with a product. Scrolling requires a lot less effort than clicking. As a result, users are more likely to scroll the page rather than click to jump to another page.
Improve user engagement. We all want our users to spend more time on our websites. A well-designed scrolling effect makes interactions more dynamic and gives otherwise static web experience much more life. Paired with bold text and visuals, this effect can engage users in interaction and encourage them to stay on a page for longer.
Create a memorable experience. Users visit a lot of websites regularly, but only a fraction of the websites stay in their memory. Creative scrolling effects, such as scroll-triggered animated effects, can help you create memorable experiences, make your website stand out from the crowd, and increase the chances that users will return.
Better storytelling. Storytelling is a powerful technique for offering information in a way that users can relate to. In some cases, it's even possible to tell a complete story by designing single page websites with eye-catching scrolling effects that naturally connect different types of information.
The original scroll effect: parallax scrolling
If you’re familiar with computer games from the late 80s and early 90s, you probably remember a pleasant visual effect that many games from that era shared. In games like Super Mario Bros., when the main character moves on the screen, the background moves at a different speed, creating an illusion of depth and dimension.
The technique is called the parallax effect. Parallax scrolling is based on making different layers of content or backgrounds move at different speeds, creating an optical illusion for the user. Today the parallax effect is commonly used in many sectors, including responsive web design.
A five minute tutorial on the parallax scrolling effect
Beyond parallax: 10 innovative scroll examples you'll want to copy
1. The Other Side Of Truth
The Other Side Of Truth is a website that showcases two points of view on the Russian-Ukrainian war—world and Russia. Here the scrolling effects are used to tell the story. All objects on the homepage respond to scrolling, which helps immerse users in an online experience—letters expand across the page, photos fall into place, and illustrations of magazine covers stack up as you scroll down the page. The site also has a background gradient scroll effect, which you can also implement with Wix Studio.
2. Tilton Group
Tilton Group creates thermoformed plastic packaging. Content on this website is framed in individual sections that take up the entirety of the screen so that when the user scrolls the page, they see only one particular product feature, like recyclability, at a time. The site also features a split-screen section with detailed information about the products, where scrolling is applied separately to the right and left blocks.
3. Ivy Chen
Ivy Chen, a fashion and graphic designer, introduces an artful scrolling effect on their website. Once you start to scroll, you see that the content inside the frame changes, but the frame itself stays still. As a result, you can see how a clothing silhouette is filled with details. This pleasant visual effect is known as a sticky scroll.
4. Collage Crafting
Collage Crafting is a contemporary product design boutique that creates original art objects. The website uses the full power of parallax and scroll-triggered animations such as side-scrolling text and images to both inform and delight site visitors. Side-scrolling is tied to your scroll position, so you can see in real time how the website responds to your scroll position by showing you more or less text, like header letters that animate at different rates and lines of body copy that slide into frame upon scroll.
5. Engineered Floors
Engineered Floors creates sustainable flooring products. This website is an excellent demonstration of the rule, “Show, don’t tell.” Instead of telling the users how great their products are, they show products in action. Once the visitor starts to scroll, the visuals that represent a particular product zoom-in and create a more vivid preview of the product for visitors.
6. Canals Amsterdam
As you probably guessed from this website's title, Canals Amsterdam, the primary subject of this website is canals in the beautiful city of Amsterdam. It uses an unconventional type of scrolling, a side scroll, to explore the history of Amsterdam's canals. Horizontal scrolling creates a lovely illusion of reading a coffee table book and calls back to the experience of looking at a timeline from left to right.
7. Cure Nails
Cure Nails is a beauty boutique focused on designing perfect nails. This website finds a proper balance of functionality and creativity. It relies on parallax but only in a couple of areas. Once you start to scroll, you notice that only the hero image and last image on the page are parallax-based. This is done intentionally—to highlight the key message that this website tries to convey. Creative visual effects naturally capture more attention and increase chances that visitors will read the message.
8. Bavvic
Bavvic crafts creative toys for kids. The website uses a relatively simple yet effective scrolling technique—on-scroll image revealing. As you scroll down, you notice that different parts of the background image become visible. It's not the most groundbreaking use of scroll in our list, yet it works well for the audience because it’s accessible and can be easily viewed on mobile devices.
9. Lunixr
Lunixr is a company that offers a beauty collagen supplement. The website uses various scroll-based techniques, such as scroll-triggered animations and fade-in effects for the product descriptions, and all those pleasing effects were created using Editor X.
10. Strek
Strek is a boutique yoga/fitness studio and coffee bar based in London. Strek's website creates an excellent impression on first-time visitors with only one scroll-based effect—image reveals on scroll. Despite its relevant simplicity, this effect quickly visualizes its space and services and allows site creators to tell a compelling story about their brand.
6 essential rules to consider when adding scroll effects to your website
Now when you know what parallax scrolling is, let's discuss a few simple rules for introducing scrolling effects to your website.
1. Consider the nature of your website
Scrolling techniques like parallax work only for particular types of websites. They typically work best for product websites (such as Lunixr that we’ve covered above) and portfolio websites. Think twice if you want to use scrolling techniques for information-heavy websites such as news portals or blogs. Users can quickly get annoyed if they see the same visual effect repeatedly, especially if those effects are time-consuming.
2. Ensure that scrolling effects work fine in dynamics
All too often, designs that look great as static mockups can easily break as soon as users start interacting with them. When it comes to animated effects such as scrolling, it's not enough to validate a static design; you need to interact with your design to understand how it feels. It will help you to identify areas where motion effects can be fine-tuned.
3. Check website performance
Similar to other animated effects, scrolling effects (and parallax scrolling in particular) are heavy effects, and without proper attention from website creators, they can easily cause performance degradation. Slow loading times or (and) heavy use of hardware resources can easily lead to the site abandonment. That's why it's vital to measure website's core web vitals all the time. Use tools like PageSpeed Insights to see how your website performs in the real world.
4. Don’t hijack scrolling
Scroll hijacking often accompanies the parallax scrolling effects. Scroll hijacking is when the system takes control of the scrolling behavior and dictates the pace at which the content on the page displays. This technique creates quite an unnatural experience for users. Most people have certain expectations on how the scrolling should work, and they learn this behavior from the websites they visit daily. When a particular site tries to break those rules, it immediately creates extra friction for its users.
5. Allow users to turn off animated effects
Scrolling effects can easily create bad user experiences for people who suffer from motion sickness. On-scroll triggered fancy motion effects with many objects moving simultaneously can cause nausea for this group of users. Consider adding an option to your website that allows users to turn off animated effects so that they can comfortably interact with your website. If turning off effects is impossible for some reason, at least try to minimize the use of unnecessary decorative effects.
6. Adjust your design for mobile users
Today a high percentage of users visit websites from their mobile devices. It's vital to create a comfortable experience for this group of users. Parallax is one of the effects that doesn't work well on mobile devices. It simply doesn't scale well to mobile screens. That's why it's recommended to at least minimize the usage of parallax on mobile devices.
Ultimately, scrolling features are a storytelling device
Techniques like parallax scrolling are typically considered decorative effects, but they can also serve much more than just aesthetic purposes. Well-designed scrolling effect can introduce a sense of depth in otherwise flat design and become an integral part of the visual story you want to communicate to your audience.
.jpg)
.jpg)
