Parallax Scroll

This feature allows you to change the scroll speed of any elements across different devices. Ideal for adding more depth where elements can appear further away and closer to the reader as they scroll the page.

This feature can be activated from the ‘interactive’ tab inside any native element. If adding to an image, it’s recommended to wrap in a div or block and instead add the functionality there (or add a overlay to create a wrapper for the parallax).

How it works

You set the scrolling speed between -10 and 10. Zero being normal scroll. The higher the number, the more extreme the effect, so it’s generally recommended to stick to using low numbers.

A negative value will make it move slower than regular scrolling, and a positive value will make it move faster.

Example Use

If you don’t want elements to move around the page much, to preserve the layout structure, there’s also the option to contain the parallax inside of a container with overflow hidden. For eg..

Scroll speed – Set your scroll speed between -10 and 10. Numbers closer to zero will be more subtle, I recommend more subtle 🙂 Like with any styling added, the scroll speed is inherited across smaller devices but can be changed for smaller devices. By default, the mobile device is set to 0 and so the parallax effect is removed.

Tips

  • if the element is moving more slowly, it will feel as though it’s further away to the user. So if being used on elements in the background, giving it a low z-index to make sure it sits behind other elements and either lowering the opacity or adding a blur can help it feel in the background more.
  • The parallax movement is controlled with transforms. If you’re needing to add your own transforms to an element, like a rotate make sure to do this to either a container element or an inner element, not to the actual element that you’re adding the parallax effect to. This will avoid conflicts where two transforms are trying to be applied at the same time.
  • Consider changing the values for different devices as your layout changes. On mobiles, elements moving too fast is unlikely to create a good user experience.
  • For best performance (60fps scrolling) using parallax on elements that are either positioned absolute or fixed is recommended. These elements then are outside the natural flow of the page and are more easily animated by the browser. If only using on a few elements it won’t make much difference, but if you’re adding a lot of parallax on your page this is one way to keep performance at a maximum.