ScrollTimeline

Limited availability

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

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das ScrollTimeline-Interface der Web Animations API repräsentiert eine Scroll-Fortschritts-Zeitleiste (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.

AnimationTimeline ScrollTimeline

Konstruktor

ScrollTimeline()

Erstellt eine neue ScrollTimeline-Objektinstanz.

Instanzeigenschaften

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 damit die Animation steuert.

axis Schreibgeschützt

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

Instanzmethoden

Dieses Interface erbt die Methoden seines Elternteils, AnimationTimeline.

Beispiele

Anzeige der Quelle und Achse einer Scroll-Fortschritts-Zeitleiste

In diesem Beispiel animieren wir ein Element mit einer class von box entlang einer Ansichts-Fortschritts-Zeitleiste – es animiert sich ü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 ist 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 uns Referenzen zu den <div>s box und output, erstellen dann eine neue ScrollTimeline, wobei wir angeben, dass das Element, das den Fortschritt der Scroll-Zeitleiste steuern 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

BCD tables only load in the browser

Siehe auch