Parallax Elements

General

The Parallax Elements extension provides a way to move elements on the screen based on how the user interacts with your site. Currently, we have 2 supported ways of interaction:

1. Scroll
   • This allow the elements to move vertically on the page when the user scrolls the page. You can set the speed of the movements and create some pretty amazing effects if you can get creative with it.
2. Mouse move
   • Elements can move on the screen when the mouse pointer moves along the surface of the page. They can follow the pointer or move away from it depending create a reverse magnet effect.

How it works

Like most of the other extensions, you can find additional controls for existing elements under Advanced > Extras. There is a section called Parallax which lets you enable parallax for that element. The types of elements supported for this functionality are Columns and Widgets. Enabling the Parallax option lets you access quite a few options which we outline below.

Settings

• Type — This option lets you choose the type of interaction for which the movement of the element responds to. We currently have two options:
  • Scroll — The element moves when the user scrolls
    • Relative to — Determines when the element is in it’s original position
      • Viewport middle — The element is in it’s original position when it reaches the absolute middle of the viewport. We recommend using this option when the element is by default OUTISDE the viewport when the page loads
      • Start position — The element is in it’s original position by default, when the page loads, the starts moving. We recommend using this option when the element is by default INSIDE the viewport when the page loads
    • Disable for — Choose the breakpoint for which the effect is disabled. Can be “None”, “Mobile and Tablet” or “Mobile Only”.
    • Invert direction — Wether the element moves up or down upon scroll.
    • Amount — Sets the speed the element moves with relative to the amount of scroll. The higher the value, the more speed it will have. Example: If you set this to 1, the number of pixels scrolled will equal the amount of pixels the element moves with. If Invert direction is disabled, it will be fixed on the page as you scroll.
  • Mouse — The element moves when the mouse moves on the surface of the page
    • Relative to — Determines when the element is in it’s original position
      • Element Center — The element is in it’s original position when the mouse is positioned over it’s original position, and moves as you moves away or follows the pointer as you move it away from that position, depending on the value of the Invert direction value.
      • Viewport center — The element is in it’s original position when the mouse is positioned over the absolute middle of the viewport, and moves away or follows the pointer as you move it away from the center of the viewport, depending on the value of the Invert direction value.
    • Axis — You can choose to constrain the element to move only on one axis. Can be “Both”, “Vertical” or “Horizontal”.
    • Invert direction — By default, the element follows the mouse. Set this to “Yes” to have it move away from the mouse.
    • Max Distance — Elements snap back into place if distance between the Element center and the mouse position (in pixels) is above a certain value. Here you can define that value. Input a very high number (for example 5000) to not have it snap back into place. Play around with this until you get the desired outcome. This option is not available if the Relative to control is set to Viewport center.
    • Amount — The amount of pixels with which the element moves as you move the pointer away. There is a cap on this value, so you won’t be able to have the element “stick” to the mouse pointer.
• Direction — This allows you to switch between the direction to which the image moves in relation to it’s container when the user scrolls the page.

FAQ

Are there currently other properites that can change on user interaction?

Currently there aren’t, but we’ll be adding opacity, scale and blur in addition to the current position property.