CSS scroll-gesteuerte Animationen

Das Modul für CSS scroll-gesteuerte Animationen bietet Funktionalität, die auf dem CSS-Animationsmodul und der Web Animations API aufbaut. Es ermöglicht Ihnen, Eigenschaftswerte entlang einer scrollbasierten Zeitleiste zu animieren, anstatt der standardmäßigen, zeitbasierten Dokumentzeitleiste. Das bedeutet, dass Sie ein Element animieren können, indem Sie das Element, seinen Scroll-Container oder sein Wurzelelement scrollen, anstatt nur durch den Zeitverlauf.

Scroll-gesteuerte Animationen in Aktion

Sie können den Scroller, der die Animation steuert, entweder benennen oder mit der scroll-Funktion definieren.

<main>
 <div></div>
</main>

css

main {
 scroll-timeline: --mainTimeline;
}
div {
 animation: backgroundAnimation linear;
 animation-timeline: scroll(nearest inline);
}
div::after {
 animation: shapeAnimation linear;
 animation-timeline: --mainTimeline;
}

@layer animations {
 @keyframes backgroundAnimation {
 0% {
 background-color: palegoldenrod;
 }
 100% {
 background-color: magenta;
 }
 }
 @keyframes shapeAnimation {
 0% {
 left: 0;
 top: 0;
 background-color: black;
 }
 50% {
 top: calc(100% - var(--elSize));
 left: calc(50% - var(--elSize));
 background-color: red;
 }
 100% {
 left: calc(100vw - var(--elSize));
 top: 0;
 rotate: 1800deg;
 background-color: white;
 }
 }
}
@layer pageSetup {
 :root {
 --elSize: 50px;
 }
 main {
 height: 90vh;
 overflow: scroll;
 border: 1px solid;
 margin: 5vh auto;
 }
 div {
 height: 400vh;
 width: 400vw;
 }
 div::after {
 content: "";
 border: 1px solid red;
 height: var(--elSize);
 width: var(--elSize);
 position: absolute;
 border-radius: 20px;
 corner-shape: superellipse(-4);
 }
}
@layer noSupport {
 @supports not (scroll-timeline: --mainTimeline) {
 body::before {
 content: "Your browser doesn't support scroll-driven animations.";
 background-color: wheat;
 display: block;
 width: 100%;
 text-align: center;
 }
 body > * {
 display: none;
 }
 }
}

[フレーム]

Scrollen Sie das Element in der Inline-Richtung, um seine Hintergrundfarbe zu ändern. Scrollen Sie es vertikal, um den generierten Inhalt zu bewegen, zu drehen und die Farben zu ändern.