back

Parallax

Moves elements vertically at different speeds on scroll to create a parallax effect.

Usage

<div 
  class="my-element" 
  data-lg-parallax
  data-lg-parallax-amplitude="0.5">
</div>

<div 
  class="my-element" 
  data-lg-parallax="child">
    <img src="/my-image" />
</div>

Please note that the parallax effect use element’s transform property. Using parallax on an element will override it’s default transform and conflict with some reveal animations. It’s recommended to create two separate containers to use parallax and reveal animation together.

Attributes

Attribute Type Default Description
data-lg-parallax String null Set to childwhen you want the first child element to move within its parent bounding box with an hidden overflow.
data-lg-parallax-anchor String center The element anchor point used to define the element position during the scroll. You can change that value to bottom or top.
data-lg-parallax-amplitude Number || String 1 Defines the movement amplitude during scroll, in proportion to the element’s height. A value of 1 means the element movement will be equal to its height.

You can use a negative number to make the element move the other way. You can also use a string like {0.5,1.5} to use a random value in this range.
data-lg-parallax-disable String null You can disable parallax based on the device type, using one of the following string: desktop, tablet, mobile, handheld (= mobile + tablet).
data-lg-parallax-inertia Number 0.1 The inertia strength, which adds smoothness to the animation.

The default value can be changed globally in JS luge.settings({parallax: {inertia: 0.1}}).