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