You can add a parallax scrolling effect to foreground elements and background images.

Locating the parallax scrolling settings¶

Parallax scrolling is available on basic elements and layout elements. To locate the parallax settings: 

1. Navigate to a page or template with the Layout canvas
2. Click the ellipsis icon on the element (or double-click the element) you wish to apply the Parallax scrolling effect to
3. Click the Properties button
4. Click JS Settings
5. Click the Parallax scrolling check box
6. The Parallax scrolling settings will now be added to your form.

Using the parallax scrolling settings¶

The parallax settings are available by breakpoint. This allows different settings to be applied at different resolutions. It also allows parallax effects to be switched off at specific resolutions. To enable parallax scrolling, click on the Enable parallax toggle against the breakpoint(s) you wish the effect to be applied.

Once enabled, 3 options will be displayed. These are:

Type¶

Sets what the parallax scrolling will be applied to.

• Background - The parallax scrolling will apply to the background image of the element
• Foreground - The parallax scrolling will apply to an element.

Direction¶

Sets the direction of the parallax scrolling.

• Vertical - The scrolling effect will be vertical
• Horizontal - The scrolling will be horizontal.

Factor¶

A numerical value that multiplies the speed of the element’s parallax effect on scroll. 

Accepted values:¶

• Positive number. Decimals are accepted. As an example, 0.5 is a common value
• Negative numbers are accepted. These reverse the direction of the effect. As an example, -0.5 will do the same as above in the opposite direction.

Background offset¶

If using Background, this will set how much the background image position is offset.

Accepted units:

Any CSS length unit. If no units are specified, the offset will be calculated in pixels.