Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
ScrollTimeline
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more support for this feature? Tell us why.
Die ScrollTimeline-Schnittstelle der Web Animations API repräsentiert eine Scroll-Fortschritts-Timeline (sehen Sie sich CSS scroll-gesteuerte Animationen für weitere Details an).
Übergeben Sie eine ScrollTimeline-Instanz an den Animation()-Konstruktor oder die animate()-Methode, um sie als die Timeline festzulegen, die den Fortschritt der Animation steuern wird.
Konstruktor
ScrollTimeline()-
Erstellt eine neue
ScrollTimeline-Objektinstanz.
Instanzeigenschaften
Diese Schnittstelle erbt auch die Eigenschaften ihrer übergeordneten Klasse, AnimationTimeline.
sourceSchreibgeschützt-
Gibt eine Referenz auf das scrollbarere Element (scroller) zurück, dessen Scroll-Position den Fortschritt der Timeline und somit der Animation antreibt.
axisSchreibgeschützt-
Gibt einen enumerierten Wert zurück, der die Scroll-Achse repräsentiert, die den Fortschritt der Timeline antreibt.
Instanzmethoden
Diese Schnittstelle erbt die Methoden ihrer übergeordneten Klasse, AnimationTimeline.
Beispiele
>Anzeige der Quelle und Achse einer Scroll-Fortschritts-Timeline
In diesem Beispiel animieren wir ein Element mit der class box entlang einer Ansichtsfortschritts-Timeline – es animiert über den Bildschirm, während das Dokument gescrollt wird. Wir geben das source-Element und die Scroll-axis in einem output-Element in der oberen rechten Ecke aus.
HTML
Der HTML-Code für das Beispiel wird unten gezeigt.
<div class="content"></div>
<div class="box"></div>
<div class="output"></div>
CSS
Der CSS-Code für das Beispiel sieht folgendermaßen aus:
.content {
height: 2000px;
}
.box {
width: 100px;
height: 100px;
border-radius: 10px;
background-color: rebeccapurple;
position: fixed;
top: 20px;
left: 0%;
}
.output {
font-family: "Helvetica", "Arial", sans-serif;
position: fixed;
top: 5px;
right: 5px;
}
JavaScript
Im JavaScript holen wir Referenzen auf die box- und output-<div>-Elemente, erstellen dann eine neue ScrollTimeline und geben an, dass das Element, das den Fortschritt der Scroll-Timeline antreiben wird, das Dokument-(<html>)-Element ist und die Scroll-Achse die block-Achse ist. Wir animieren dann das box-Element mit der Web Animations API. Zuletzt zeigen wir das Quell-Element und die Achse im output-Element an.
const box = document.querySelector(".box");
const output = document.querySelector(".output");
const timeline = new ScrollTimeline({
source: document.documentElement,
axis: "block",
});
box.animate(
{
rotate: ["0deg", "720deg"],
left: ["0%", "100%"],
},
{
timeline,
},
);
output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;
Ergebnis
Scrollen Sie, um zu sehen, wie die Box animiert wird.
Spezifikationen
| Spezifikation |
|---|
| Scroll-driven Animations> # scrolltimeline-interface> |