Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 zu spezifizieren, die verwendet wird, um die Zeitachse für eine benannte Scrollfortschritts-Zeitachsen-Animation bereitzustellen, die durch das Scrollen eines scrollbaren Elements (Scroller) zwischen oben und unten (oder links und rechts) fortschreitet. scroll-timeline wird auf dem Scroller gesetzt, der die Zeitachse bereitstellt. Weitere Details finden Sie unter CSS scroll-gesteuerte Animationen.
Hinweis: Wenn das Scroller-Element in der Achsendimension seinen Container nicht überläuft oder wenn der Überlauf versteckt oder abgeschnitten wird, wird keine Scrollfortschritts-Zeitachse erstellt.
Die Eigenschaften scroll-timeline-axis und scroll-timeline-name können auch mithilfe der scroll-timeline Kurzform-Eigenschaft gesetzt werden.
Syntax
/* Logical property values */
scroll-timeline-axis: block;
scroll-timeline-axis: inline;
/* Non-logical property values */
scroll-timeline-axis: y;
scroll-timeline-axis: x;
Werte
Erlaubte Werte für scroll-timeline-axis sind:
block-
Die Scrollleiste auf der Blockachse des Scroller-Elements, die die Achse in der Richtung senkrecht zum Textfluss innerhalb einer Zeile ist. Für horizontale Schreibmodi, wie das standardmäßige Englisch, ist dies dasselbe wie
y, während es für vertikale Schreibmodi dasselbe wiexist. Dies ist der Standardwert. inline-
Die Scrollleiste auf der Inlineachse des Scroller-Elements, die die Achse in der Richtung parallel zum Textfluss in einer Zeile ist. Für horizontale Schreibmodi ist dies dasselbe wie
x, während es für vertikale Schreibmodi dasselbe wieyist. y-
Die Scrollleiste auf der vertikalen Achse des Scroller-Elements.
x-
Die Scrollleiste auf der horizontalen Achse des Scroller-Elements.
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
Definieren der Achse der Scrollfortschritts-Zeitachse
In diesem Beispiel wird eine Scrollfortschritts-Zeitachse namens --my-scroller definiert, indem die Eigenschaft scroll-timeline-name auf dem :root-Element (<html>) festgelegt wird. Diese Zeitachse wird dann auf die Animation des Elements mit der Klasse animation angewendet, indem animation-timeline: --my-scroller verwendet wird.
Um den Effekt von scroll-timeline-axis zu demonstrieren, wird in diesem Beispiel eine horizontale (nicht standardmäßige) Scrollleiste verwendet, um die Animation zu steuern.
HTML
Das HTML für das Beispiel wird unten gezeigt.
<body>
<div class="content"></div>
<div class="box animation"></div>
</body>
CSS
Das CSS für den Container setzt das :root als Quelle einer Scrollfortschritts-Zeitachse namens --my-scroller mithilfe der Eigenschaft scroll-timeline-name.
Die Scrollachse wird mit scroll-timeline-axis: x; (Chromium) und scroll-timeline-axis: horizontal; (Firefox) festgelegt – dadurch bestimmt die Position der horizontalen Scrollleiste die Animations-Zeitachse.
Die Breite des .content-Elements wird auf einen großen Wert gesetzt, damit es das :root-Element überläuft.
Es ist auch erwähnenswert, dass das .animation-Element die Zeitachse auf sie angewendet hat mittels animation-timeline: --my-scroller;, und es hat auch eine animation-duration, damit das Beispiel in Firefox funktioniert.
:root {
scroll-timeline-name: --my-scroller;
/* Chromium supports the new x/y syntax */
scroll-timeline-axis: x;
/* Firefox still supports the old horizontal/vertical syntax */
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;
animation-timeline: --my-scroller;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
}
@keyframes rotate-appear {
from {
rotate: 0deg;
top: 0%;
}
to {
rotate: 720deg;
top: 100%;
}
}
Ergebnis
Scrollen Sie die horizontale Leiste unten, um zu sehen, wie das Quadrat animiert wird, während Sie scrollen.
Spezifikationen
| Specification |
|---|
| Scroll-driven Animations # propdef-scroll-timeline-axis |
Browser-Kompatibilität
Loading...