ViewTimeline: ViewTimeline() Konstruktor

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, bevor Sie diese produktiv verwenden.

Der ViewTimeline() Konstruktor erstellt eine neue ViewTimeline Objektinstanz.

Syntax

js
new ViewTimeline(options)

Parameter

options

Ein Objekt, das die folgenden Eigenschaften enthalten kann:

subject

Ein Verweis auf ein Element, das das Subjektelement darstellt, dessen Sichtbarkeit innerhalb seines nächstgelegenen vorhaltbaren Elementes (Scroller) den Fortschritt der Zeitachse steuern wird.

axis Optional

Ein enumerierter Wert, der die Scrollachse repräsentiert, die den Fortschritt der Zeitachse antreiben wird. Mögliche Werte sind:

  • "block": Die Scrollleiste auf der Blockachse des Scrollcontainers, welche die Achse in der Richtung senkrecht zum Fluss von Text innerhalb einer Zeile ist. Für horizontale Schreibrichtungen, wie etwa das Standardenglisch, ist dies dasselbe wie "y", während es für vertikale Schreibrichtungen dasselbe wie "x" ist.
  • "inline": Die Scrollleiste auf der Inline-Achse des Scrollcontainers, welche die Achse in der Richtung parallel zum Fluss von Text innerhalb einer Zeile ist. Für horizontale Schreibrichtungen ist dies dasselbe wie "x", während es für vertikale Schreibrichtungen dasselbe wie "y" ist.
  • "y": Die Scrollleiste auf der vertikalen Achse des Scrollcontainers.
  • "x": Die Scrollleiste auf der horizontalen Achse des Scrollcontainers.

Wird dieser weggelassen, wird axis standardmäßig auf "block" gesetzt.

inset Optional

Ein Wert oder ein Array von Werten, die eine Anpassung der Position des Scrollports repräsentieren (siehe Scrollcontainer für mehr Details), in dem das Subjekt als sichtbar angesehen wird. Mögliche Werte sind:

  • "auto": Die Standardpositionsbox wird verwendet.
  • Ein String: Wenn ein String angegeben ist, kann dieser aus einem oder zwei Werten bestehen, die auto oder einem CSS-<length-percentage>-Wert entsprechen. Anders ausgedrückt sollte der String ein gültiger view-timeline-inset-Wert sein.
  • Ein Array aus einem oder zwei Werten, die "auto" oder ein geeigneter CSSNumericValue sein können, um einen Längen- oder Prozentsatzversatz darzustellen (beispielsweise CSS.px() oder CSS.percent()). Wenn ein Array bereitgestellt wird, repräsentiert der erste Wert den Startversatz (der den ViewTimeline.endOffset-Wert beeinflusst) und der zweite Wert repräsentiert den Endversatz (der den ViewTimeline.startOffset-Wert beeinflusst).

Wenn das Array nur einen Wert hat, wird dieser dupliziert.

Wird dieser weggelassen, wird inset standardmäßig auf auto gesetzt.

Rückgabewert

Eine neue ViewTimeline Objektinstanz.

Beispiele

Ein Beispiel finden Sie auf der Hauptseite ViewTimeline.

Spezifikationen

Specification
Scroll-driven Animations
# dom-viewtimeline-viewtimeline

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch