?> CSS Native Parallax · Scroll-Driven Animations Demo

CSS Native Parallax

Scroll-driven parallax using view-timeline. Supporting browsers run the native CSS effect directly; older browsers get a small JavaScript fallback.

↓ scroll

What this page is testing

The background layers below are animated by CSS Scroll-Driven Animations when the browser supports the full recipe: named view timelines, animation timelines, animation ranges, and individual transform properties.

Native first Feature detection leaves the CSS animation untouched only when every required primitive is available.
Safe fallback Without native support, JavaScript writes a compositor-friendly transform on scroll and resize.
Motion preference If prefers-reduced-motion is enabled, both native and fallback parallax are disabled.
Mountain

Just add a class

.parallax-bg on the wrapper creates the view timeline. The image listens to that timeline and moves as the section crosses the viewport.

Bridge

Tune the depth

The --parallax-offset variable controls both travel distance and scale, so gaps are automatically covered.

Water

Compositor-friendly

The demo animates translate and scale, avoiding layout work during scroll and keeping the effect practical on mobile.

Forest

Reduced motion? Handled.

prefers-reduced-motion disables both the animation and the scale in one media query block.

The recipe

The core native implementation in a single CSS snippet. The fallback script is deliberately separate so supporting browsers experience the CSS version.

.parallax-bg {
  view-timeline-name: --parallax-tl;
  view-timeline-axis: block;
  overflow: hidden;
}

.parallax-bg > * {
  scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
  animation-name: parallax;
  animation-duration: 1ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --parallax-tl;
  animation-range: cover;
  will-change: translate;
}

@keyframes parallax {
  from { translate: 0 calc(var(--parallax-offset, 20) * -1%); }
  to   { translate: 0 calc(var(--parallax-offset, 20) * 1%); }
}

/* Vestibular safety — respect OS-level motion preference */
@media (prefers-reduced-motion: reduce) {
  .parallax-bg > * {
    animation: none;
    scale: 1;
  }
}

Browser support: this demo checks support at runtime. Current baseline is Chrome/Edge 115+, Safari 26+, and Firefox behind a flag. Full compatibility →

← back to favs.eu.org