Parallax
Scroll parallax container that moves slotted content at a configurable speed factor relative to the page scroll to create a sense of depth.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
speed | number | 0.5 | Parallax factor for the default content layer (0.5 = half scroll speed, negative reverses direction). |
axis | string | y | Scroll axis for the parallax effect: "y" (default) or "x". |
image | string | — | Optional background image URL for a built-in parallaxed background layer. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/parallax.js"></script>import "./pura/lib/parallax.js";