Skip to main content

Parallax Depth Layers — Playground

Depth Layers

Move your pointer — each layer drifts by its own depth.

Move your pointer over the scene — layers drift by depth.
Scene — options
Foreground card — layer options
Sample options — updates as you tweak
// On the SCENE container (Animations → Parallax Layers → Scene):
'parallax' => [
    'role' => 'scene',
    'scene' => [
        'source'    => 'mouse',
        'intensity' => 40,
        'smoothing' => 50,
    ],
],

// On the "Foreground card" child (role → Layer):
'parallax' => [
    'role' => 'layer',
    'layer' => [
        'depth'     => 72,
        'axis'      => 'both',
        'direction' => 'with',
        'scale_far' => 'no',
        'blur_far'  => 'no',
    ],
],

Parallax is a per-element control on the Animations tab. Mark a container as a Scene, then give each child a Layerdepth — they drift at different speeds from the pointer and/or scroll. One shared render loop, no library; skipped on touch for the pointer source, and honours reduced motion.

Move your pointer over the scene — each layer drifts by its own depth. Tweak the Scene (intensity, smoothing, and whether it's driven by pointer, scroll, or both), then click any layer on the right to edit its depth, axis, direction, scale-with-depth and depth-blur. This runs the real runtime: one shared render loop with scene-level pointer smoothing, reading the same data-pl-* attributes the plugin stamps. The Sample options update as you tweak.

Where it lives

Parallax is a per-element control — open a container → Animations tab → Parallax Layers → set it to Scene, then give each child element the Layer role and a depth. One shared loop, no library; the pointer source is skipped on touch (scroll layers still move) and it honours reduce motion.

← Back to Parallax Depth Layers