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() Experimentell

Erstellt eine neue ScrollTimeline-Objektinstanz.

Instanzeigenschaften

Dieses Interface erbt auch die Eigenschaften seines Elternteils, AnimationTimeline.

source Schreibgeschützt Experimentell

Gibt eine Referenz auf das scrollbare Element (Scroller) zurück, dessen Scrollposition den Fortschritt der Zeitleiste und damit die Animation steuert.

axis Schreibgeschützt Experimentell

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ScrollTimeline
Experimental
ScrollTimeline() constructor
Experimental
axis
Experimental
source
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch