ScrollTimeline

Limited availability

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

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.

source Schreibgeschützt: Gibt eine Referenz auf das scrollbarere Element (scroller) zurück, dessen Scroll-Position den Fortschritt der Timeline und somit der Animation antreibt.
axis Schreibgeschü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.

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.

html

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

CSS

Der CSS-Code 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: "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}`;