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 repräsentiert eine Scrollfortschritt-Zeitleiste (siehe CSS scrollgetriebene 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.

AnimationTimeline ScrollTimeline

Konstruktor

ScrollTimeline()

Erstellt eine neue Instanz eines ScrollTimeline-Objekts.

Instanzeigenschaften

Dieses Interface erbt auch die Eigenschaften seines Elternteils, AnimationTimeline.

source Schreibgeschützt

Gibt eine Referenz auf das scrollbare Element (scroller) zurück, dessen Scroll-Position den Fortschritt der Zeitleiste und damit der Animation antreibt.

axis Schreibgeschützt

Gibt einen enumerierten Wert zurück, der die Scroll-Achse repräsentiert, die den Fortschritt der Zeitleiste antreibt.

Instanzmethoden

Dieses Interface erbt die Methoden seines Elternteils, AnimationTimeline.

Beispiele

Anzeige der Quelle und Achse einer Scrollfortschritt-Zeitleiste

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

HTML

Das HTML für das Beispiel wird unten gezeigt.

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

CSS

Das CSS für das Beispiel sieht folgendermaßen 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: Arial, Helvetica, sans-serif;
  position: fixed;
  top: 5px;
  right: 5px;
}

JavaScript

Im JavaScript holen wir Referenzen zu den box und output <div>s, dann erstellen wir eine neue ScrollTimeline, wobei wir angeben, dass das Element, das den Fortschritt der Scroll-Zeitleiste antreiben wird, das Dokument (<html>) Element ist, und die Scroll-Achse die block-Achse ist. Dann animieren wir das box-Element mit der Web Animations API. Schließlich zeigen wir das Quell-Element und die Achse im output-Element an.

js
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

Specification
Scroll-driven Animations
# scrolltimeline-interface

Browser-Kompatibilität

Siehe auch