Parallax
Import Parallax from @waaark/luge, register it with luge.addPlugin('parallax', Parallax), then call luge.init(). See Getting started for a complete setup.
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 | unset | Set to child when 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 | unset | Disable on desktop, tablet, mobile, or handheld. Requires the Browser plugin. |
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}}). |
Composition
Parallax writes inline transforms. Use separate wrapper/child elements when combining it with another transform animation. data-lg-parallax="child" animates the first child other than a <source> element and hides overflow on its parent.
In normal mode, amplitude 1 spans one element height across a full scroll range. Child mode instead uses percentage translation and scales the child to cover its container; it does not use the normal height-based distance. Provide a child with dimensions that cover the parent.
Parallax uses inertia directly as an interpolation factor: smaller positive values move more slowly, 1 follows immediately, and 0 freezes the interpolated movement. Use a numeric value between 0 and 1; this plugin does not clamp inertia or parse inertia ranges.