Parallax Scrolling Effects

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling

Animation companies used the parallax effect in the 20th century to simulate depth in their 2D scenes. One example(before the internet) is Disney’s use of multiplane cameras in Snow White and the Seven Dwarves.

Even astronomers use the principle of parallax to measure large distances, such as the distance of a planet or a star from Earth.The most important fundamental distance measurements in astronomy come from trigonometric parallax, as applied in the stellar parallax method.

But back to webpages and how it used today. In a UI, you can create a parallax effect by moving different objects at different rates when the UI scrolls or pans. To demonstrate, let's look at two layers of content, a list and a background image. The list is placed on top of the background image which already gives the illusion that the list might be closer to the viewer. Now, to achieve the parallax effect, we want the object closest to us to travel "faster" than the object that is farther away. As the user scrolls the interface, the list moves at a faster rate than the background image, which creates the illusion of depth

Parallax scrolling is a powerful technique used not just to make designs prettier, but to engage users. Whilst web design best practice encourages you to place your most important information above the fold, a parallax scrolling effect lets you be a bit more imaginative and space out your information. Since the effect itself encourages users to scroll, you can slowly reveal information at a pace that provides more breathing space for your content, while weaving in photos and videos to enhance user understanding of the messaging.

It should also be noted that overuse and usability issues can arise. To counteract some of these follow these two rules of thumb.
"No task, no problem" : Parallax is safest in environments where users are browsing for leisure, without a specific goal or task in mind. In those cases, parallax can be used to support a narrative or to contribute to a brand’s identity. If you’re not sure whether your use case fits this category, you can always refer to the 3 Bs Test to see if parallax is a good choice for your business and your users.
"If users have a task, put content first" : The ultimate test of parallax usability is whether users can easily and quickly complete their task