Parallax

Depth-on-scroll. Layers inside a .vd-parallax container translate at different rates as the container moves through the viewport, creating a sense of depth. Movement is driven by JavaScript on a requestAnimationFrame-throttled scroll listener and is fully disabled when the visitor requests reduced motion.

Depth from layered speeds

Scroll the page — the colour band (.vd-parallax-bg, slow) and the dot grid (.vd-parallax-layer, fast) translate at different rates via data-parallax-speed, while the foreground .vd-parallax-content stays put. That difference in rates is what reads as depth. The colour band also shifts as the panel scrolls through the viewport — a CSS scroll-driven flourish layered on top.

Scroll — the colour band shifts as the dot grid races ahead

Reduced motion: if your OS requests reduced motion, the component does not initialize and layers render statically.

Markup

Wrap layers in a .vd-parallax container. Movement is wired by useParallax(root) (see Wiring below).

<!-- Slow background drift + fixed foreground content -->
<div class="vd-parallax vd-parallax-md vd-parallax-slow">
  <div class="vd-parallax-bg" style="background-image: url('hero.jpg')"></div>
  <div class="vd-parallax-content">
    <h2>Title over a moving backdrop</h2>
  </div>
</div>

<!-- Multiple layers, each with its own rate via data-parallax-speed -->
<div class="vd-parallax vd-parallax-lg">
  <div class="vd-parallax-layer" data-parallax-speed="0.3"></div>
  <div class="vd-parallax-layer" data-parallax-speed="0.8"></div>
  <div class="vd-parallax-content">…</div>
</div>

Classes & attributes

Wiring

import { ref } from 'vue';
import { useParallax } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
useParallax(root);   // rAF scroll handler + reduced-motion guard; cleanup on unmount

Classes & attributes

Class / attribute	Applies to	Effect
`.vd-parallax`	container	Required. Marks the scroll-reactive container (position: relative; overflow: hidden).
`.vd-parallax-layer`	child	An absolutely-positioned moving layer.
`.vd-parallax-bg`	child	A moving background layer (120% height; set background-image).
`.vd-parallax-content`	child	Foreground content that stays in normal flow (z-index above layers).
`.vd-parallax-slow / .vd-parallax-medium / .vd-parallax-fast`	container	Container speed multiplier — 0.5 / 1 / 1.5.
`.vd-parallax-horizontal`	container	Translate layers on the X axis instead of Y (default is vertical).
`.vd-parallax-sm / -md / -lg / -full`	container	Fibonacci min-heights — 377px / 610px / 987px / 100vh.
`.vd-parallax-disable-mobile`	container	Freeze layers at ≤767px viewports.
`data-parallax-speed="N"`	layer	Per-layer rate multiplier (applied on top of the container speed).

Composable API:useParallax(root) wires every .vd-parallax inside the root ref. The rAF scroll handler and prefers-reduced-motion guard are set up automatically and torn down on unmount — no manual refresh/destroy needed.