scroll-timeline-axis

Limited availability

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

Die scroll-timeline-axis CSS Eigenschaft wird verwendet, um die Richtung der Bildlaufleiste anzugeben, die genutzt wird, um die Zeitachse für eine scroll-gesteuerte Animation bereitzustellen, die durch das Scrollen eines scrollbaren Elements (Scroller) fortschreitet.

Syntax

css

/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;

/* Physical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;

/* Global values */
scroll-timeline-axis: inherit;
scroll-timeline-axis: initial;
scroll-timeline-axis: revert;
scroll-timeline-axis: revert-layer;
scroll-timeline-axis: unset;

Werte

<axis>: Ein <axis> Schlüsselwortwert, der die Richtung oder Achse des Scrollports beschreibt, die die scroll-gesteuerte Animation kontrolliert. Der Standardwert ist block.

Beschreibung

Die scroll-timeline-axis Eigenschaft legt fest, welche Scrollleiste verwendet wird, um die Zeitachse für eine Scroll-Fortschritts-Zeitachse Animation bereitzustellen. Der Wert ist die <axis> der Scrollleiste. Die scroll-timeline Eigenschaft wird auf dem Scroller gesetzt, der die Zeitachse bereitstellen wird.

Wenn das Scroller-Element in der Achsendimension nicht außerhalb seines Containers überläuft oder wenn der Überlauf ausgeblendet oder abgeschnitten ist, wird keine Scroll-Fortschritts-Zeitachse erstellt.

Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der Kurzschreibweise scroll-timeline gesetzt werden.

Formale Definition

Anfangswert	`block`
Anwendbar auf	Scrollcontainer
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

scroll-timeline-axis = 
  [ block | inline | x | y ]#

Beispiele

Definition der Achse der Scroll-Fortschritts-Zeitachse

In diesem Beispiel wird eine Scroll-Fortschritts-Zeitachse mit dem Namen --my-scroller mithilfe der scroll-timeline-name Eigenschaft auf dem :root Element (<html>) definiert. Diese Zeitachse wird dann auf die Animation des Elements mit der Klasse animation angewendet, indem animation-timeline: --my-scroller verwendet wird.

Um die Wirkung von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht standardmäßige) Bildlaufleiste verwendet, um die Animation zu steuern.

HTML

Das HTML für das Beispiel wird unten gezeigt.

html

<body>
  <div class="content"></div>
  <div class="box animation"></div>
</body>

CSS

Das CSS für den Container setzt das :root als Quelle einer Scroll-Fortschritts-Zeitachse mit dem Namen --my-scroller unter Verwendung der scroll-timeline-name Eigenschaft. Die Scroll-Achse wird mit scroll-timeline-axis: x; gesetzt, wodurch die Position der horizontalen Bildlaufleiste die Animationszeitachse bestimmt. Wir fügen auch scroll-timeline-axis: horizontal; für Browser hinzu, die die nicht standardmäßigen alten Werte horizontal und vertical unterstützen und nicht x und y.

Die Breite des .content Elements wird auf einen großen Wert gesetzt, damit es das :root Element überläuft.

Auf das .animation Element wird die Animation mit der animation Kurzschreibweise angewendet, und die Scroll-Zeitachse wird mit der animation-timeline gesetzt.

css

:root {
  scroll-timeline-name: --my-scroller;

  scroll-timeline-axis: x;
  scroll-timeline-axis: horizontal;
}

body {
  margin: 0;
  overflow-y: hidden;
}

.content {
  height: 100vh;
  width: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 25px;
  left: 25px;
}

.animation {
  animation: rotate-appear 1ms linear;
  animation-timeline: --my-scroller;
}

@keyframes rotate-appear {
  from {
    rotate: 0deg;
    top: 0%;
  }

  to {
    rotate: 720deg;
    top: 100%;
  }
}

@layer no-support {
  @supports not (scroll-timeline-axis: block) {
    body::before {
      content: "Your browser doesn't support the `scroll-timeline-axis` property.";
      background-color: wheat;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
}

Ergebnis

Scrollen Sie die horizontale Leiste am unteren Rand, um das Quadrat animiert zu sehen, während Sie scrollen.

Spezifikationen

Specification
Scroll-driven Animations # propdef-scroll-timeline-axis

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden