What Is Parallax Scrolling?

Date First Published: 20th January 2023

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 7/10

Learn more about what parallax scrolling is in this article.

Parallax scrolling is a web design technique where the background content moves past at a different speed than the foreground whilst scrolling, creating a three-dimensional effect on a two-dimensional webpage and enhancing the visual appearance of a website. For example, when scrolling down, users might notice that the text leaves the visual field, but the background image stays in place. Both the background and the foreground are moving, but the background often moves much more slowly, creating an impression of depth.

Tips For Parallax Scrolling

Before adding parallax scrolling to a website, website owners should consider the following tips:

• Use it selectively. Avoid using it on all pages as this will distract users and won't be as effective. Ideally, parallax scrolling should only be used on major pages, such as the homepage .
• Consider image compression. Large image files that load too slowly will have a negative impact on user experience.
• Consider the colours carefully. Parallax scrolling isn’t just about images in the foreground and background. It is also about colour.
• Consider the purpose of the page. Parallax scrolling does not work as well on pages where users need to perform a specific task, such as the checkout page where people are about to buy an item online.

Limitations Of Parallax Scrolling

Parallax scrolling does come with some limitations. Even though it can greatly enhance the visual appearance of the desktop version of a website, it is less suitable for mobile devices. This is because the screen sizes of smartphones and tablets are much smaller and the images used on a desktop computer are often too large for these devices, both in terms of dimensions and file size.

Parallax scrolling can also cause major performance problems, such as crashing, on smartphones and tablets since it requires advanced code. Therefore, websites using parallax scrolling should provide a simplified version for mobile users or turn off the effect on mobile devices.

Examples Of Parallax Scrolling

Below are three examples of websites that have effectively used parallax scrolling.

1. Delassus Group

Delassus Group uses a parallax scrolling effect to draw attention to its main product: tomatoes. Also, Delassus Group does not overcomplicate the design as the brand uses solid colors and simple shapes to bring its message.

2. ToyFight

ToyFight uses a powerful 3D effect to make the homepage more engaging. It is not only present as scrolling, but also when clicking from one page to another.

3. Collage Crafting

Collage Crafting creatively uses parallax scrolling and the most engaging element is the letters of the heading. They slide out of place when scrolling down and are spread out over the image of a product design example. The colours are also used thoughtfully. The dark navy blue background with the pale pink letters effectively stands out.

History

Parallax scrolling came from the multiplane camera technique which was introduced to animation in the 1930s. It uses multiple layers that are each moved by a different amount in the same direction and the faster-moving layers are viewed as closer to the camera. From the 1980s, this technique was used in 2D computer graphics and video games. Since 2011, parallax scrolling has been used in web design for better engagement and user experience.