Hier erfahren Sie, wie Sie Scrollzeitleisten und Zeitachsen ansehen, um scrollbare Animationen auf deklarative Weise zu erstellen.
Scroll-Animationen
Unterstützte Browser
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
-
<ph type="x-smartling-placeholder">
Scroll-gesteuerte Animationen sind ein gängiges UX-Muster im Web. Eine Scroll-Animation ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass beim Scrollen nach oben oder unten die verknüpfte Animation in Direct Response vor- oder zurückspult wird. Beispiele dafür sind Effekte wie Parallaxe-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.
<ph type="x-smartling-placeholder">Eine ähnliche Scroll-gesteuerte Animation ist eine Animation, die mit der Position eines Elements innerhalb des Scroll-Containers verknüpft ist. So können beispielsweise Elemente eingeblendet werden, wenn sie sichtbar werden.
<ph type="x-smartling-placeholder">Die klassische Methode für diese Art von Effekten besteht darin, auf Scroll-Ereignisse im Hauptthread zu reagieren, was zu zwei Hauptproblemen führt:
- Moderne Browser führen das Scrollen in einem separaten Prozess aus und liefern Scroll-Ereignisse daher asynchron.
- Animationen im Hauptthread unterliegen Verzögerungen.
Dadurch ist das Erstellen leistungsstarker scrollbarer Animationen, die mit dem Scrollen synchron sind, nicht möglich oder sehr schwierig.
Ab Chrome-Version 115 gibt es neue APIs und Konzepte, mit denen Sie deklarative, scrollbare Animationen aktivieren können: Scroll-Zeitachsen und -Zeitachsen anzeigen.
Diese neuen Konzepte lassen sich in die vorhandene Web Animations API (WAAPI) und die CSS Animations API einbinden und profitieren so von den Vorteilen der vorhandenen APIs. Dazu gehört die Möglichkeit, scrollbare Animationen über den Hauptthread hinaus laufen zu lassen. Ja, das ist richtig: Sie können jetzt mit nur wenigen Zeilen zusätzlichen Code nahtlose, flüssige Animationen erstellen, die durch Scrollen über den Hauptthread laufen und gesteuert werden. Was magst du nicht?!
Animationen im Web, kurze Zusammenfassung
Animationen im Web mit CSS
Um eine Animation in CSS zu erstellen, definieren Sie mithilfe der At-Regel @keyframes
eine Reihe von Keyframes. Verknüpfen Sie es mithilfe der Eigenschaft animation-name
mit einem Element und legen Sie außerdem einen animation-duration
fest, um festzulegen, wie lange die Animation dauern soll. Es gibt noch weitere animation-*
-Properties im Langformat – animation-easing-function
und animation-fill-mode
, um nur einige zu nennen –, die alle in der Abkürzung animation
kombiniert werden können.
Hier sehen Sie als Beispiel eine Animation, die ein Element auf der X-Achse hochskaliert und gleichzeitig seine Hintergrundfarbe ändert:
@keyframes scale-up {
from {
background-color: red;
transform: scaleX(0);
}
to {
background-color: darkred;
transform: scaleX(1);
}
}
#progressbar {
animation: 2.5s linear forwards scale-up;
}
Animationen im Web mit JavaScript
In JavaScript kann die Web Animations API verwendet werden, um genau dasselbe zu erreichen. Dazu erstellen Sie entweder neue Animation
- und KeyFrameEffect
-Instanzen oder verwenden die viel kürzere Element
-Methode animate()
.
document.querySelector('#progressbar').animate(
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
);
Dieses visuelle Ergebnis des obigen JavaScript-Snippets ist mit der vorherigen CSS-Version identisch.
Animationszeitachsen
Standardmäßig wird eine Animation, die an ein Element angehängt ist, auf der Zeitachse des Dokuments ausgeführt. Ihre Startzeit beginnt beim Laden der Seite bei 0 und tickt sich vor, während die Uhrzeit voranschreitet. Dies ist die Standard-Animationszeitachse. Bis jetzt war dies die einzige Animationszeitachse, auf die Sie Zugriff hatten.
In der Spezifikation für scrollgesteuerte Animationen sind zwei neue Arten von Zeitachsen definiert, die Sie verwenden können:
- Scroll-Fortschritts-Zeitachse: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.
- Zeitachse des Fortschritts ansehen: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist.
Scroll-Fortschritt auf der Zeitachse
Eine Zeitachse für den Scrollfortschritt ist eine Animationszeitachse, die mit dem Fortschritt an der Scrollposition eines Scrollcontainers – auch als Scrollport oder Scroller bezeichnet – entlang einer bestimmten Achse verknüpft ist. Sie wandelt eine Position in einem Scrollbereich in einen prozentualen Fortschritt um.
Die anfängliche Scrollposition entspricht einem Fortschritt von 0% und die letzte Scrollposition einen Fortschritt von 100 %. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% bis 100% aufgezählt wird, während Sie beim Scrollen von oben nach unten scrollen.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Eine Scroll-Fortschritts-Zeitachse wird oft mit „Scroll-Zeitachse“ abgekürzt.
Fortschritts-Zeitachse anzeigen
Diese Art von Zeitachse ist mit dem relativen Fortschritt eines bestimmten Elements innerhalb eines Scroll-Containers verknüpft. Genau wie bei einer Zeitachse für den Scroll-Fortschritt wird der Scroll-Offset eines Scrollers erfasst. Im Gegensatz zu einer Zeitachse für den Scrollfortschritt bestimmt die relative Position eines Motivs innerhalb dieses Scrollers den Fortschritt.
Das ist vergleichbar mit der Funktionsweise von IntersectionObserver
, mit der erfasst werden kann, wie viel ein Element im Scroller sichtbar ist. Wenn das Element beim Scrollen nicht sichtbar ist, überschneidet es sich nicht. Wenn es innerhalb des Scrollers sichtbar ist – selbst für den kleinsten Teil –, überschneidet es sich.
Eine Zeitachse des Anzeigefortschritts beginnt an dem Zeitpunkt, an dem sich ein Motiv mit dem Scroller überschneidet, und endet, wenn das Motiv den Scroller nicht mehr kreuzt. In der folgenden Visualisierung sehen Sie, dass der Fortschritt bei 0% ansteigt, wenn das Subjekt den Scroll-Container betritt, und in dem Moment, in dem das Subjekt den Scroll-Container verlässt, 100% erreicht.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Die Zeitachse des Aufrufverlaufs wird oft einfach mit „Zeitachse ansehen“ abgekürzt. Es ist möglich, ein Targeting auf bestimmte Teile einer Zeitachse basierend auf der Größe eines Objekts vorzunehmen. Dazu gehen wir später genauer ein.
Praktische Nutzung der Zeitachsen für den Scroll-Fortschritt
Anonyme Scroll-Fortschritts-Zeitachse in CSS erstellen
Am einfachsten lässt sich eine Scroll-Zeitachse in CSS mit der Funktion scroll()
erstellen. Dadurch wird eine anonyme Scroll-Zeitachse erstellt, die du als Wert für die neue animation-timeline
-Eigenschaft festlegen kannst.
Beispiel:
@keyframes animate-it { … }
.subject {
animation: animate-it linear;
animation-timeline: scroll(root block);
}
Die Funktion scroll()
akzeptiert ein <scroller>
- und ein <axis>
-Argument.
Für das Argument <scroller>
sind folgende Werte zulässig:
nearest
: Verwendet den Scroll-Container des nächstgelegenen Ancestors (Standardeinstellung).root
: Verwendet den Darstellungsbereich des Dokuments als Scrollcontainer.self
: Das Element selbst wird als Scrollcontainer verwendet.
Für das Argument <axis>
sind folgende Werte zulässig:
block
: Verwendet die Messung des Fortschritts entlang der Blockachse des Scroll-Containers (Standardeinstellung).inline
: Verwendet die Messung des Fortschritts entlang der Inline-Achse des Scroll-Containers.y
: Verwendet die Messung des Fortschritts entlang der Y-Achse des Scrollcontainers.x
: Verwendet die Messung des Fortschritts entlang der x-Achse des Scrollcontainers.
Wenn Sie beispielsweise eine Animation an den Stamm-Scroller auf der Blockachse binden möchten, müssen die Werte root
und block
an scroll()
übergeben werden. Insgesamt beträgt der Wert scroll(root block)
.
Demo: Lesefortschrittsanzeige
In dieser Demo ist oben im Darstellungsbereich eine Lesefortschrittsanzeige fixiert. Wenn Sie auf der Seite nach unten scrollen, wächst die Fortschrittsanzeige so lange, bis sie am Ende des Dokuments die volle Breite des Darstellungsbereichs einnimmt. Für die Animation wird eine anonyme Scroll-Fortschritts-Zeitachse verwendet.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Die Lesefortschrittsanzeige befindet sich oben auf der Seite und verwendet die Position „Fixiert“. Zur Nutzung von zusammengesetzten Animationen wird nicht das width
animiert, sondern das Element auf der x-Achse mithilfe von transform
verkleinert.
<body>
<div id="progress"></div>
…
</body>
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0; top: 0;
width: 100%; height: 1em;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
Die Zeitachse für die Animation grow-progress
für das Element #progress
ist auf eine anonyme Zeitachse festgelegt, die mit scroll()
erstellt wird. An scroll()
werden keine Argumente übergeben. Daher wird auf die Standardwerte zurückgesetzt.
Der standardmäßig zu verfolgende Scroller ist nearest
und die Standardachse ist block
. Dadurch wird effektiv auf den Stamm-Scroller ausgerichtet, da dieser der nächstgelegene Scroller des #progress
-Elements ist, während seine Blockrichtung erfasst wird.
Benannte Zeitachse für den Scroll-Fortschritt in CSS erstellen
Alternativ können Sie eine benannte Scroll-Zeitachse verwenden, um eine Zeitachse für den Scroll-Fortschritt zu definieren. Sie ist etwas ausführlicher, aber sie kann sich als nützlich erweisen, wenn die Ausrichtung nicht auf einen übergeordneten oder den Root-Scroller erfolgt, die Seite mehrere Zeitachsen verwendet oder wenn die automatische Suche nicht funktioniert. So können Sie die Zeitachse für den Scrollfortschritt anhand des Namens identifizieren, den Sie ihr gegeben haben.
Wenn Sie eine benannte Scrollfortschritt-Zeitachse für ein Element erstellen möchten, legen Sie die CSS-Eigenschaft scroll-timeline-name
im Scrollcontainer auf eine gewünschte Kennung fest. Der Wert muss mit --
beginnen.
Um zu optimieren, welche Achse verfolgt werden soll, müssen Sie auch die Eigenschaft scroll-timeline-axis
deklarieren. Zulässige Werte sind dieselben wie für das Argument <axis>
von scroll()
.
Um die Animation mit der Zeitachse für den Scroll-Fortschritt zu verknüpfen, legen Sie schließlich die Eigenschaft animation-timeline
für das Element, das animiert werden soll, auf denselben Wert wie die für scroll-timeline-name
verwendete ID fest.
Codebeispiel:
@keyframes animate-it { … }
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: inline;
}
.scroller .subject {
animation: animate-it linear;
animation-timeline: --my-scroller;
}
Bei Bedarf können Sie scroll-timeline-name
und scroll-timeline-axis
in der scroll-timeline
-Kurzschreibweise kombinieren. Beispiel:
scroll-timeline: --my-scroller inline;
Demo: Horizontale Karussellschrittanzeige
In dieser Demo wird über jedem Bilderkarussell eine Schrittanzeige eingeblendet. Wenn ein Karussell drei Bilder enthält, beginnt die Anzeigeleiste mit einer Breite von 33 %. Dies zeigt an, dass Sie sich gerade das erste Bild von drei Bildern ansehen. Wenn das letzte Bild zu sehen ist – was durch Scrollen bis zum Ende bestimmt wird – nimmt der Indikator die volle Breite des Scrollers ein. Für die Animation wird eine benannte Scroll-Fortschritts-Zeitachse verwendet.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Das grundlegende Markup für eine Galerie lautet wie folgt:
<div class="gallery" style="--num-images: 2;">
<div class="gallery__scrollcontainer">
<div class="gallery__progress"></div>
<div class="gallery__entry">…</div>
<div class="gallery__entry">…</div>
</div>
</div>
Das .gallery__progress
-Element befindet sich genau innerhalb des Wrapper-Elements .gallery
. Seine anfängliche Größe wird durch die benutzerdefinierte Eigenschaft --num-images
bestimmt.
.gallery {
position: relative;
}
.gallery__progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1em;
transform: scaleX(calc(1 / var(--num-images)));
}
.gallery__scrollcontainer
legt die enthaltenen .gallery__entry
-Elemente horizontal an und ist das Element, das scrollt. Durch die Erfassung der Scrollposition wird der .gallery__progress
animiert. Dazu wird die benannte Scroll-Fortschritts-Zeitachse --gallery__scrollcontainer
verwendet.
@keyframes grow-progress {
to { transform: scaleX(1); }
}
.gallery__scrollcontainer {
overflow-x: scroll;
scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
animation: auto grow-progress linear forwards;
animation-timeline: --gallery__scrollcontainer;
}
Eine Zeitachse für den Scroll-Fortschritt mit JavaScript erstellen
Zum Erstellen einer Scroll-Zeitachse in JavaScript erstellen Sie eine neue Instanz der ScrollTimeline
-Klasse. Gib ein Immobiliengepäckstück mit den source
und axis
an, die du verfolgen möchtest.
source
: Ein Verweis auf das Element, dessen Scroller Sie verfolgen möchten. Verwenden Siedocument.documentElement
, um das Targeting auf den Root-Scroller vorzunehmen.axis
: Legt fest, welche Achse verfolgt werden soll. Ähnlich wie bei der CSS-Variante sind die Werteblock
,inline
,x
undy
zulässig.
const tl = new ScrollTimeline({
source: document.documentElement,
});
Wenn Sie es an eine Webanimation anhängen möchten, übergeben Sie es als timeline
-Eigenschaft und lassen Sie duration
weg, falls vorhanden.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
Demo: Lesefortschrittsanzeige, noch einmal aufgerufen
Um die Lesefortschrittsanzeige mit JavaScript neu zu erstellen und dabei dasselbe Markup zu verwenden, verwenden Sie den folgenden JavaScript-Code:
const $progressbar = document.querySelector('#progress');
$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
Das visuelle Ergebnis ist in der CSS-Version identisch: Das erstellte timeline
-Element verfolgt den Root-Scroller und skaliert #progress
auf der x-Achse beim Scrollen auf der Seite von 0% auf 100 %.
✨ Probiere es selbst aus
Praktische Tipps zur Fortschritts-Zeitachse
In CSS eine Zeitachse für den anonymen Aufruffortschritt erstellen
Verwenden Sie die Funktion view()
, um eine Zeitachse für den Fortschritt zu erstellen. Die zulässigen Argumente sind <axis>
und <view-timeline-inset>
.
<axis>
ist identisch mit der Zeitachse für den Scrollfortschritt und definiert, welche Achse verfolgt werden soll. Der Standardwert istblock
.- Mit
<view-timeline-inset>
können Sie einen Offset (positiv oder negativ) angeben, um die Grenzen anzupassen, wenn ein Element als sichtbar angesehen wird oder nicht. Der Wert muss ein Prozentsatz oderauto
sein, wobeiauto
der Standardwert ist.
Um beispielsweise eine Animation an ein Element zu binden, das sich mit seinem Scroller auf der Blockachse schneidet, verwenden Sie view(block)
. Ähnlich wie bei scroll()
legen Sie diesen Wert als Wert für die Eigenschaft animation-timeline
fest und vergessen Sie nicht, animation-duration
auf auto
zu setzen.
Mit dem folgenden Code wird jedes img
eingeblendet, wenn es beim Scrollen den Darstellungsbereich überschreitet.
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: Zeiträume in der Zeitachse ansehen
Standardmäßig wird eine mit der Zeitachse verknüpfte Animation an den gesamten Zeitachsenbereich angehängt. Das beginnt mit dem Moment, in dem das Subjekt den Scrollport erreicht, und endet, wenn es den Scrollport ganz verlassen hat.
Es ist auch möglich, sie mit einem bestimmten Teil der Zeitachse zu verknüpfen, indem Sie den Bereich angeben, zu dem sie gehören soll. Dies kann beispielsweise nur der Fall sein, wenn das Motiv in den Bildlaufbereich eintritt. In der folgenden Visualisierung wird der Fortschritt bei 0% hochgezählt, wenn das Subjekt in den Scrollcontainer gelangt, aber er erreicht bereits 100% ab dem Zeitpunkt, an dem es sich vollständig überschneidet.
<ph type="x-smartling-placeholder">Sie können die folgenden Bereiche in der Zeitachse ansehen:
cover
: Stellt den gesamten Bereich der Zeitachse für den Aufruffortschritt dar.entry
: Gibt den Bereich an, in dem die Hauptkontobox in den Sichtbarkeitsbereich des Ansichtsfortschritts eintritt.exit
: Gibt den Bereich an, in dem die Hauptbox den Sichtbarkeitsbereich des Ansichtsfortschritts verlässt.entry-crossing
: Stellt den Bereich dar, in dem der Hauptrahmen den Endrahmen überschreitet.exit-crossing
: Stellt den Bereich dar, in dem der Hauptrahmen den Startrand überschreitet.contain
: Gibt den Bereich an, in dem der Hauptrahmen entweder vollständig in den Sichtbarkeitsbereich des Ansichtsfortschritts innerhalb des Scrollports eingespeist wird oder diesen vollständig abdeckt. Das hängt davon ab, ob das Motiv größer oder kürzer als der Scroller ist.
Wenn Sie einen Bereich definieren möchten, müssen Sie einen „Bereichsbeginn“ und „Bereichsende“ festlegen. Jede besteht aus einem Bereichsnamen (siehe Liste oben) und einem Bereichsversatz, mit dem die Position innerhalb dieses Bereichsnamens bestimmt wird. Der Bereichsversatz wird normalerweise in Prozent zwischen 0%
und 100%
angegeben. Sie können aber auch eine feste Länge wie 20em
angeben.
Wenn Sie beispielsweise eine Animation ab dem Moment laufen lassen möchten, an dem das Motiv eintritt, wählen Sie entry 0%
als Bereichsbeginn. Wenn das Thema bis zur Eingabe des Themas beendet sein soll, wählen Sie entry 100%
als Wert für das Bereichsende aus.
In CSS legen Sie dies mithilfe der Eigenschaft animation-range
fest. Beispiel:
animation-range: entry 0% entry 100%;
Verwende in JavaScript die Properties rangeStart
und rangeEnd
.
$el.animate(
keyframes,
{
timeline: tl,
rangeStart: 'entry 0%',
rangeEnd: 'entry 100%',
}
);
Verwenden Sie das unten eingebettete Tool, um zu sehen, wofür die einzelnen Bereichsnamen stehen und wie sich die Prozentsätze auf die Start- und Endpositionen auswirken. Legen Sie für den Beginn des Bereichs entry 0%
und das Ende des Bereichs auf cover 50%
fest und ziehen Sie dann die Bildlaufleiste, um das Animationsergebnis zu sehen.
Aufzeichnung ansehen
Wie Sie vielleicht beim Experimentieren mit den Tools zur Anzeige von Bereichen der Zeitachse bemerken, können einige Bereiche mit zwei verschiedenen Kombinationen aus Bereichsname und Bereichsversatz ausgerichtet werden. Beispiel: entry 0%
, entry-crossing 0%
und cover 0%
sind alle auf dieselbe Region ausgerichtet.
Wenn „Bereichsbeginn“ und „Bereichsende“ auf denselben Bereichsnamen abzielen und den gesamten Bereich abdecken – von 0% bis 100%–, können Sie den Wert kürzen, um einfach den Bereichsnamen zu verwenden. Beispielsweise kann animation-range: entry 0% entry 100%;
in das viel kürzere animation-range: entry
umgeschrieben werden.
Demo: Bild einblenden
In dieser Demo werden die Bilder eingeblendet, wenn sie den Scrollport aufrufen. Dazu wird eine Zeitachse für anonyme Ansichten verwendet. Der Animationsbereich wurde optimiert, sodass jedes Bild eine volle Deckkraft aufweist, wenn es sich auf halber Strecke zum Bildlauf befindet.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Der Einblendungseffekt wird durch die Verwendung eines animierten Clip-Paths erreicht. Für diesen Effekt wird folgendes CSS verwendet:
@keyframes reveal {
from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}
.revealing-image {
animation: auto linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
Benannte Zeitachse für Fortschritt in CSS erstellen
Ähnlich wie bei Scroll-Zeitachsen gibt es benannte Versionen. Sie können auch benannte Versionen von Zeitachsen erstellen. Anstelle der scroll-timeline-*
-Properties verwenden Sie Varianten mit dem Präfix view-timeline-
, also view-timeline-name
und view-timeline-axis
.
Es gelten die gleichen Arten von Werten und dieselben Regeln für die Suche nach einer benannten Zeitachse.
Demo: Bild einblenden, noch einmal ansehen
Der überarbeitete Code sieht so aus:
.revealing-image {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: auto linear reveal both;
animation-timeline: --revealing-image;
animation-range: entry 25% cover 50%;
}
Mit view-timeline-name: revealing-image
wird das Element innerhalb des nächsten Scroller erfasst. Dieser Wert wird dann als Wert für das Attribut animation-timeline
verwendet. Die visuelle Ausgabe ist genau die gleiche wie zuvor.
✨ Probiere es selbst aus
Eine Zeitachse für den Aufruffortschritt in JavaScript erstellen
Zum Erstellen einer Zeitachse in JavaScript erstellen Sie eine neue Instanz der ViewTimeline
-Klasse. Gib ein Eigentums-Gepäckstück mit dem subject
, das du erfassen möchtest, axis
und inset
an.
subject
: Ein Verweis auf das Element, das Sie innerhalb seines eigenen Scrollers verfolgen möchten.axis
: Die zu verfolgende Achse. Ähnlich wie bei der CSS-Variante sind die Werteblock
,inline
,x
undy
zulässig.inset
: Eine eingefügte (positive) oder Outset (negativ)-Anpassung des Scrollports, wenn bestimmt wird, ob die Box sichtbar ist.
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
Wenn Sie es an eine Webanimation anhängen möchten, übergeben Sie es als timeline
-Eigenschaft und lassen Sie duration
weg, falls vorhanden. Optional können Sie Bereichsinformationen mit den Attributen rangeStart
und rangeEnd
übergeben.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
rangeStart: 'entry 25%',
rangeEnd: 'cover 50%',
});
✨ Probiere es selbst aus
Weitere Dinge zum Ausprobieren
An mehrere Bereiche der Ansichtszeitachse mit einem Satz von Keyframes anhängen
Sehen wir uns diese Demo für die Kontaktliste an, in der die Listeneinträge animiert sind. Wenn ein Listeneintrag von unten in den Bildlaufport eintritt, wird er eingeblendet und eingeblendet. Beim Verlassen des Bildlaufports oben gleitet er heraus.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
In dieser Demo wird jedes Element mit einer Ansichtszeitleiste dekoriert, die das Element beim Überqueren des Scrollports verfolgt, wobei zwei scrollbare Animationen daran angehängt sind. Die animate-in
-Animation wird an den entry
-Bereich der Zeitachse und die animate-out
-Animation an den exit
-Bereich der Zeitachse angehängt.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-100%); }
}
#list-view li {
animation: animate-in linear forwards,
animate-out linear forwards;
animation-timeline: view();
animation-range: entry, exit;
}
Anstatt zwei verschiedene Animationen auszuführen, die an zwei verschiedene Bereiche angehängt sind, können Sie auch einen Satz von Keyframes erstellen, der bereits die Bereichsinformationen enthält.
@keyframes animate-in-and-out {
entry 0% {
opacity: 0; transform: translateY(100%);
}
entry 100% {
opacity: 1; transform: translateY(0);
}
exit 0% {
opacity: 1; transform: translateY(0);
}
exit 100% {
opacity: 0; transform: translateY(-100%);
}
}
#list-view li {
animation: linear animate-in-and-out;
animation-timeline: view();
}
Da die Keyframes die Bereichsinformationen enthalten, müssen Sie animation-range
nicht angeben. Das Ergebnis ist genau das gleiche wie vorher.
✨ Probiere es selbst aus
An die Scroll-Zeitachse eines Nicht-Ancestors anhängen
Der Suchmechanismus für benannte Scroll-Zeitachsen und benannte Zeitachsen anzeigen ist auf das Scrollen für Ancestors beschränkt. Häufig ist das zu animierende Element jedoch kein untergeordnetes Element des Scrollers, das verfolgt werden muss.
Damit dies funktioniert, kommt das Attribut timeline-scope
ins Spiel. Sie verwenden diese Eigenschaft, um eine Zeitachse mit diesem Namen zu deklarieren, ohne sie tatsächlich zu erstellen. Dadurch wird die Zeitachse mit diesem Namen breiter gefasst. In der Praxis verwenden Sie die Eigenschaft timeline-scope
für ein gemeinsames übergeordnetes Element, damit die Zeitachse eines untergeordneten Scrollers daran angehängt werden kann.
Beispiel:
.parent {
timeline-scope: --tl;
}
.parent .scroller {
scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
animation: animate linear;
animation-timeline: --tl;
}
In diesem Snippet gilt:
- Das Element
.parent
deklariert eine Zeitachse mit dem Namen--tl
. Jedes untergeordnete Element kann ihn finden und als Wert für das Attributanimation-timeline
verwenden. - Das Element
.scroller
definiert eine Scroll-Zeitachse namens--tl
. Standardmäßig ist es nur für die untergeordneten Elemente sichtbar, aber da.parent
es alsscroll-timeline-root
festgelegt hat, wird es an dieses Element angehängt. - Für das Element
.subject
wird die Zeitachse--tl
verwendet. Sie geht den Ancestor-Baum hinauf und findet--tl
auf der.parent
. Wenn--tl
auf der.parent
auf die--tl
von.scroller
verweist, verfolgt.subject
im Grunde die Scroll-Fortschrittszeit der.scroller
.
Anders ausgedrückt: Sie können timeline-root
verwenden, um eine Zeitachse nach oben zu einem Ancestor zu verschieben (auch Winding genannt), sodass alle untergeordneten Elemente des Ancestors darauf zugreifen können.
Das Attribut timeline-scope
kann sowohl mit Scrollzeitleisten als auch mit Zeitachsen ansehen verwendet werden.
Weitere Demos und Ressourcen
Alle Demos, die in diesem Artikel auf der Miniwebsite für scroll-driven-animations.style behandelt werden. Die Website enthält noch viele weitere Demos, die zeigen, was mit scrollbaren Animationen möglich ist.
Eine der weiteren Demos ist diese Liste mit Albumcovern. Jedes Cover dreht sich in 3D, während es im Fokus steht.
<ph type="x-smartling-placeholder">✨ Probiere es selbst aus
Oder diese Demo mit Stapelkarten, bei der position: sticky
genutzt wird. Wenn die Karten gestapelt werden, werden die bereits festhängenden Karten herunterskaliert, was einen schönen Tiefeneffekt erzeugt. Am Ende gleitet der gesamte Stapel als Gruppe aus der Ansicht.
✨ Probiere es selbst aus
Auf scroll-driven-animations.style gibt es auch eine Sammlung von Tools wie die Visualisierung zum Fortschritt des Zeitachsenbereichs, die wir bereits in diesem Beitrag vorgestellt haben.
Scroll-gesteuerte Animationen werden auch auf der Google I/O 2023 unter Das ist neu bei Webanimationen behandelt.