Version:

Acquia Cohesion renames to Site Studio from version 6.2. Tell me more.

    Add parallax scrolling to elements

    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.

    If using Foreground and Horizontal the element will move either to the left or right of the main content area. In some circumstances this will cause horizontal scrollbars to appear. If this is not desirable, place the parallax element within a Basic container at the parent level and set overflow:hidden on the container through the Styles tab.

    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.

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.