Parallax Scrolling

Background and foreground layers move at different speeds using scroll-driven animations.

Published June 25, 2026

Demo

Scroll to explore

Each layer moves at a different speed

↑ scroll inside the box ↑

HTML
				
				<div class="parallax-scene">
  <div class="layer-bg">Background</div>
  <div class="layer-mid">Midground</div>
  <div class="layer-front">Foreground</div>
</div>

			

CSS
				
				.parallax-scene {
  overflow-y: scroll;
  height: 300px;
}

.layer-bg {
  animation: parallax-bg linear both;
  animation-timeline: scroll(nearest block);
}

@keyframes parallax-bg {
  from { transform: translateY(0); }
  to   { transform: translateY(-15%); }
}

			

How it works

CSS scroll-driven animations use animation-timeline: scroll() to link animation progress to scroll position instead of time. Each layer gets its own @keyframes with different translateY ranges — background elements move less (−15%), creating depth. The scroll() function can target the nearest scrolling ancestor or a named scroll timeline. will-change: transform hints to the browser to optimize these layers for GPU compositing.