Just add a class
.parallax on the wrapper, one line of HTML. The browser handles the rest.
Mountain
Scroll-driven parallax using view-timeline — no JavaScript, one utility class.
.parallax on the wrapper, one line of HTML. The browser handles the rest.
The --parallax-offset variable controls both travel distance and scale, so gaps are automatically covered.
Scroll-driven animations run on the compositor thread, so no jank — even on mobile.
prefers-reduced-motion disables both the animation and the scale in one media query block.
The full implementation in a single CSS snippet — view-timeline does the heavy lifting.
.parallax {
view-timeline-name: --parallax-tl;
view-timeline-axis: block;
overflow: hidden;
& > * {
scale: calc(1 + var(--parallax-offset, 20) * 2 / 100);
animation: parallax auto linear both;
animation-timeline: --parallax-tl;
animation-range: cover;
will-change: translate;
}
}
@keyframes parallax {
from { translate: 0 calc(var(--parallax-offset, 20) * -1%); }
to { translate: 0 calc(var(--parallax-offset, 20) * 1%); }
}