Layered scroll parallax

Use it for

• A destination or property hero where the scene is the message
• One hero per page, as the opening moment

Avoid

• Text-heavy sections, where moving copy is hard to read
• Many parallax sections in a row, which makes scrolling feel slippery

How it works

A passive scroll listener schedules one requestAnimationFrame. Each layer is translated down by scrollTop times its own speed (0.15 for the near hill, 0.7 for the sun), so far layers appear to lag. The heading also fades out over the first 60 percent of the hero. Updates stop once the hero has scrolled out, and only transform and opacity change.

Accessibility

Reduced motion skips the transforms entirely, so the scene scrolls as one flat picture. The layers are decorative; the heading is real text.