Are you looking for the latest documentation?

Documentation for Acquia Cohesion V6.0 onwards has moved to https://cohesiondocs.acquia.com

    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.

    parallax-scrolling-menu.png

    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.

    parallax-scrolling-settings.png

    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.

    Accepted units:

    You can leave blank or specify a unit to be used.

    • blank - The parallax scroll effect will use REMs
    • px - The value will be applied in pixels. Applying a positive value will give a downwards direction. Applying a negative value will give an upwards direction.
    • % - The value will be applied as a percentage of the parent elements height

    Background offset

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

    Accepted units:

    You can leave blank or specify a unit to be used.

    • blank - The parallax scroll effect will use REMs
    • px - The value will be applied in pixels
    • % - The value will be applied as a percentage of the parent elements height.
    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.