ScrollTimeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ScrollTimeline-Interface der Web Animations API stellt eine Scroll-Fortschritts-Zeitleiste dar (siehe CSS-Scroll-gesteuerte Animationen für weitere Details).

Übergeben Sie eine ScrollTimeline-Instanz an den Animation()-Konstruktor oder die animate()-Methode, um sie als Zeitleiste festzulegen, die den Fortschritt der Animation steuert.

Konstruktor

ScrollTimeline(): Erstellt eine neue ScrollTimeline-Objektinstanz.

Instanz-Eigenschaften

Dieses Interface erbt auch die Eigenschaften seines Elternteils, AnimationTimeline.

source Schreibgeschützt: Gibt eine Referenz auf das scrollbare Element (Scroller) zurück, dessen Scrollposition den Fortschritt der Zeitleiste und somit der Animation antreibt.
axis Schreibgeschützt: Gibt einen enumerierten Wert zurück, der die Scrollachse angibt, die den Fortschritt der Zeitleiste steuert.

Instanz-Methoden

Dieses Interface erbt die Methoden seines Elternteils, AnimationTimeline.

In diesem Beispiel animieren wir ein Element mit einer class von box entlang einer View-Fortschritts-Zeitleiste – es animiert über den Bildschirm, während das Dokument scrollt. Wir geben das source-Element und die Scroll-axis an ein output-Element in der oberen rechten Ecke aus.

HTML

Der HTML-Code für das Beispiel wird unten gezeigt.

html

<div class="content"></div>
<div class="box"></div>
<div class="output"></div>

CSS

Der CSS-Code für das Beispiel sieht so aus:

css

.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 greifen wir auf die Referenzen der box- und output-<div>s zu und erstellen eine neue ScrollTimeline, wobei wir angeben, dass das Dokument (<html>)-Element das Element ist, das den Fortschritt der Scroll-Zeitleiste antreibt, und die Scrollachse 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}`;