demo · v144
Parallax Recipe
A three-layer parallax: each layer pins its Y position to the bottom edge with the new side-relative longhand and scrubs only its X. Scroll the box on the right; the layers slide left at different speeds. Same animation pre-144 required either two background declarations or a JS-only solution.
side-relative longhand: checking…
scroll the box below to drive the parallax
scroll me!
line
line
line
line
line
line
line
line
line
(end of scroll)
line
line
line
line
line
line
line
line
line
(end of scroll)
/* current CSS */
the API
/* the missing piece pre-144: side-relative on the longhand */
.layer {
background-position-x: right 50px; /* now legal */
background-position-y: bottom 0; /* now legal */
}
/* animate just X without touching Y or repeating the shorthand */
.layer-back { animation: scroll-x linear; animation-timeline: scroll(); }
@keyframes scroll-x {
to { background-position-x: right 200px; }
}