Parallax scrolling effects are a popular way to add depth to flat designs. The effect relies on movement: when a camera moves within a three-dimensional scene, objects in the viewfinder will appear to move in the opposite direction. We call the rate of this movement the object’s parallax.

And the closer an object is to the camera, the more parallax it will have as the camera moves horizontally.

You don’t need a camera or software to see the parallax effect at work in real life though. Next time you are a passenger in a car or on public transport, notice that the apparent speed at which the scenery outside the window passes by depends upon its distance from you. Objects that are further away(mountains, or a city skyline, as just a couple of examples) will appear to move more slowly than ones that are closer to you(e.g. neighborhood homes).

Meanwhile, objects that are situated just a short distance from you(cyclists, parked cars, plants and trees on the verge) may flash by so quickly that you barely have time to take them in.

Harnessing the parallax effect

We humans have learned to read the distance of objects partially from the speed at which they appear to move past us. In practice this means that we will understand the depth of an image from the relative speed of movement of any objects contained within it.

As designers, we can take advantage of this fact to create interactive web designs that appear to have real depth. When designing a website, you can achieve a parallax background scrolling effect by moving the design’s“background” elements at a slower rate than the“foreground.” As the user scrolls, background objects will seem to have a smaller parallax, creating a convincing illusion of depth when scrolling a website.

What are the advantages of parallax in website design?

Parallax scrolling is a more dynamic and exciting way to present information, products, or services than a simple static page or regular scrolling action.

For users, parallax scrolling can be a highly satisfying form of navigation, as it will react immediately and tangibly to their input; scroll, and something happens; scroll faster and the effect will be more noticeable. The result is that parallax scrolling makes visitors feel in charge of the navigation experience. It’s also a lot of fun.

Incorporating parallax web designs into your project can lead to greater interactions, which leads to greater engagement in your product. Just look at this list of the best parallax websites from Awwwards, and you’ll see the dynamic, eye-popping appeal of these pages.

It’s enough to make you want to create a parallax website of your own -- and we can show you how.

How to create parallax scrolling in Framer

The easiest way to achieve a parallax scroll effect in Framer is to use custom components. You can search in the Insert Menu for the Parallax: Scroll Effects package from Linton Ye. This Community package does a lot of the heavy-lifting for you, so you can create advanced scroll interactions in minutes. You will still need to make some decisions about how and when an item should respond to a scroll, but you’ll get the result without needing to code anything yourself.

With the Parallax: Scroll Effects package, you can use the Parallax Layer’s component to drive changes to several properties, such as its speed, scale, rotation, or opacity. The property will move between its Min to its Max, starting when the scroll’s position matches the provided Scroll Min value and ending when it matches the Scroll Max. You can learn more about a layer’s position by holding the Option key while hovering over the layer.

Once the components are set up on your canvas, with the properties set, you can preview your design to check that the parallax scrolling effect is exactly how you want it.

Resources

Talk about this on Discord