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 Scrollleiste festzulegen, die für die Bereitstellung der Zeitleiste für eine scroll-gesteuerte Animation verwendet wird, die durch das Scrollen eines scrollbaren Elements (Scroller) vorangebracht wird.

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 scrollbasierte Animation steuert. Der Standardwert ist block.

Beschreibung

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

Wenn das Scroller-Element nicht in der Achsen-Dimension über seinen Container hinausgeht oder wenn der Überlauf versteckt oder abgeschnitten ist, wird keine Scroll-Prozess-Zeitleiste erstellt.

Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mit der scroll-timeline Kurzschreibweise festgelegt 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

Die Achse der Scroll-Prozess-Zeitleiste definieren

In diesem Beispiel wird eine Scroll-Prozess-Zeitleiste mit dem Namen --my-scroller unter Verwendung der scroll-timeline-name Eigenschaft auf dem :root Element (<html>) definiert. Diese Zeitleiste wird dann auf die Animation des Elements mit der animation Klasse unter Verwendung von animation-timeline: --my-scroller angewendet.

Um die Wirkung von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht voreingestellte) Scrollleiste verwendet, um die Animation anzutreiben.

HTML

Der HTML-Code 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-Prozess-Zeitleiste namens --my-scroller unter Verwendung der scroll-timeline-name Eigenschaft. Die Scrollachse wird mit scroll-timeline-axis: x; festgelegt, was dazu führt, dass die horizontale Scrollleiste die Animationszeitleiste bestimmt. Wir fügen auch scroll-timeline-axis: horizontal; für Browser hinzu, die die nicht-standardisierten Legacy-Werte horizontal und vertical und nicht x und y unterstützen.

Die Breite des .content Elements wird auf einen großen Wert gesetzt, um es über das :root Element hinaus laufen zu lassen.

Das .animation Element hat die Animation mit der animation Kurzschreibweise angewendet, und die Scroll-Zeitleiste wird mit der animation-timeline festgelegt.

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 beim Scrollen animiert zu sehen.

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