Built with Readz

Parallax Scrolling

Parallax scrolling is only available on desktop
What is a parallax scroll?
It is a design effect where the background content moves at a different speed than the foreground content while scrolling.
Creating a parallax (scroll) effect is not hard, as long as you plan out how these two elements (background and foreground) will interact with one another.
This text element is on the foreground, with parallax scrolling enabled. Desktop only!
The example above is an illustration of this principle. As you scroll down the page, the background box scrolls at the regular speed of the page scroll, but the (foreground) text box scrolls at a lower speed. Because it scrolls slower, it appears to move from the top of the background box to the bottom of the background box during the scroll.
How to set up a parallax scroll
To enable parallax in an element, it has to be inside a box. Select the element, hover over the Actions and Animations button in the toolbar and choose Parallax.
The example above has the following settings:
The ACTIONS & ANIMATIONS content list at the left of this page has the following settings:
In this case, the speed is set to 100, so the element remains fixed on the page while the rest of the content scrolls down. The scroll starts when the container crosses the top of the screen and ends when the container crosses the bottom of the screen.
Important: The element you should select as 'parallax' element is the foreground element. The controls in the panel will define how this foreground element moves compared to the background element during scrolling.
Foreground element = the selected element
Background element = the selected element's container or parent
The background element should typically have a higher height than the visible screen to create a nice visible parallax scrolling effect.
Once you’ve set those options on your element in the box container, try scrolling up and down in the editor. To increase the time the parallax scroll should affect the element, increase the height of the box that contains it. You can change the start and end scroll effects too to further tune when your elements’ parallax scroll settings trigger and end. Different elements in the same box container can have their own unique parallax scroll option. This makes the parallax scroll effect even more apparent when you can compare scroll rate differences between two elements on-screen.
Contact Support
Need more help? Get in touch!
Contact support
We're available 6 a.m. to 6 p.m. PST
© 2022 Readz All Rights Reserved