scroll parallax depth layered motion parallax background effect on scroll depth illusion with layered content hero section with parallax imagery need parallax without JS libraries page feels flat without depth cues want layered motion tied to scroll position
Parallax
Fetch snippet JSON:
curl https://webspire.de/snippets/scroll/parallax.json Background
Customize
Quick Start
<div class="scroll-parallax">Moves with scroll</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 845 bytes · 42 lines
- Custom Properties
-
--parallax-speed - Classes
-
.scroll-parallax.scroll-parallax-slow.scroll-parallax-fast
scroll parallax depth layered motion
Pure CSS parallax scrolling using animation-timeline: scroll(). Elements move at different speeds relative to the scroll position, creating a depth illusion.
Layered hero section
<section class="relative h-screen overflow-hidden">
<div class="scroll-parallax-slow absolute inset-0">
<img src="/bg.jpg" class="h-full w-full object-cover" alt="Background" />
</div>
<div class="scroll-parallax relative z-10 flex h-full items-center justify-center">
<h1 class="text-5xl font-bold text-white">Parallax Hero</h1>
</div>
</section>