ScrollTimeline - Web-APIs

ScrollTimeline - Web-APIs | MDN

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}`;

Ergebnis

Scrollen Sie, um zu sehen, wie die Box animiert wird.

Spezifikationen

Spezifikation
Scroll-driven Animations # scrolltimeline-interface

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.