Parallax Scrolling

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.