Parallax

Extended Module

Scroll-linked depth effects using CSS animation-timeline: scroll(). Three scroll speeds plus static depth layer utilities for faking 3D scene depth — zero JavaScript.

gleam-parallax.css scroll-linked animation-timeline zero JS

<!-- Scroll-linked parallax (Chrome/Edge/Firefox) -->
<div class="parallax-scroll parallax-slow">Background</div>
<div class="parallax-scroll parallax-mid">Midground</div>
<div class="parallax-scroll parallax-fast">Foreground</div>

<!-- Static depth layers (visual depth without scroll) -->
<div class="parallax-scene">
  <div class="parallax-layer-1">Front</div>
  <div class="parallax-layer-3">Mid</div>
  <div class="parallax-layer-5">Far</div>
</div>

Scroll Speeds

slow

parallax-slow

±10px on scroll

mid

parallax-mid

±20px on scroll

fast

parallax-fast

±40px on scroll

Static Depth Layers

Each layer applies decreasing scale, opacity, and increasing blur to fake depth. Wrap in .parallax-scene for correct perspective.

Layer 1
Front

Layer 2

Layer 3

Layer 4

Layer 5
Far

Browser support: animation-timeline: scroll() requires Chrome 115+, Firefox 110+, Edge 115+. Layers have no visible effect in unsupported browsers (graceful fallback).