Parallax Layers

Create a parallax layers section. A section where background, middle, and foreground elements move at different speeds while scrolling, creating depth: the far layer barely moves, the near layer moves fastest. Implementation: inside a tall section, a sticky full-height container (position: sticky, top: 0, overflow: hidden) holds the layers as absolutely positioned elements. On scroll, read the section's scroll offset and apply transform: translateY(offset * factor) per layer: far layer factor ~-0.15, middle ~-0.45, near ~-0.85 (negative = moves up as you scroll down). Update inside a requestAnimationFrame-throttled scroll handler, transform only. Design the layers to sell the depth: the far layer large, low-contrast (ghosted display text works well); the middle layer normal content; the near layer small, saturated, and fast. 2-4 layers is the sweet spot. Under prefers-reduced-motion, render all layers static at their resting positions. Consider disabling on mobile if the section is tall, where parallax can feel jittery. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.