Hier erfahren Sie, wie Sie mithilfe von Scroll-Zeitachsen und Zeitachsen-Ansichten deklarative Scroll-Animationen erstellen können.
Scroll-Animationen
Scroll-Animationen sind ein gängiges UX-Muster im Web. Eine Scroll-Animation ist mit der Scroll-Position eines Scroll-Containers verknüpft. Das heißt, wenn Sie nach oben oder unten scrollen, springt die verknüpfte Animation als Direct-Response vor oder zurück. Beispiele dafür sind Effekte wie Hintergrundbilder mit Parallaxe oder Leseanzeigen, die sich beim Scrollen bewegen.
Eine ähnliche Scroll-Animation ist eine Animation, die mit der Position eines Elements innerhalb des Scroll-Containers verknüpft ist. Damit können beispielsweise Elemente eingeblendet werden, sobald sie sichtbar werden.
Der klassische Weg, diese Art von Effekten zu erzielen, besteht darin, auf Scroll-Ereignisse im Hauptthread zu reagieren. Dies führt zu zwei Hauptproblemen:
- Moderne Browser führen das Scrollen in einem separaten Prozess durch und liefern daher Scroll-Ereignisse asynchron.
- Animationen des Hauptthreads können Verzögerungen verursachen.
Dadurch lassen sich keine leistungsstarken scroll-gesteuerten Animationen erstellen, die mit dem Scrollen synchron sind.
Ab Chrome-Version 115 gibt es eine Reihe neuer APIs und Konzepte, mit denen sich deklarative Scroll-Animationen aktivieren lassen: Scroll-Zeitachsen und -Zeitachsen.
Diese neuen Konzepte lassen sich in die bestehende Web Animations API (WAAPI) und die CSS Animations API integrieren, sodass sie von den Vorteilen dieser bestehenden APIs profitieren können. Dazu gehört auch, dass scrollbare Animationen außerhalb des Hauptthreads ausgeführt werden. Ja, das ist richtig: Sie können jetzt flüssige Animationen erstellen, die durch Scrollen gesteuert werden und aus dem Hauptthread weglaufen, mit nur wenigen zusätzlichen Codezeilen. Was soll nicht gefallen?!
Animationen im Web, eine kurze Zusammenfassung
Animationen im Web mit CSS
Um eine Animation in CSS zu erstellen, definieren Sie eine Reihe von Keyframes mithilfe der @keyframes-At-Regel. Verknüpfen Sie ihn mit einem Element, indem Sie die Eigenschaft animation-name verwenden und gleichzeitig ein animation-duration festlegen, um die Dauer der Animation festzulegen. Es sind weitere animation-* Langzeit-Properties verfügbar – animation-easing-function und animation-fill-mode, um nur einige zu nennen – die alle mit der Abkürzung animation kombiniert werden können.
Hier sehen Sie als Beispiel eine Animation, bei der ein Element auf der X-Achse vergrößert wird und gleichzeitig seine Hintergrundfarbe geändert wird:
@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 lässt sich mit der Web Animations API genau dies erreichen. Erstellen Sie dazu entweder neue Animation- und KeyFrameEffect-Instanzen oder verwenden Sie die viel kürzere Element-animate()-Methode.
document.querySelector('#progressbar').animate(
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
);
Das visuelle Ergebnis des JavaScript-Snippets oben ist identisch mit der vorherigen CSS-Version.
Animationszeitachsen
Standardmäßig wird eine an ein Element angehängte Animation auf der Dokumentzeitachse ausgeführt. Die Startzeit beginnt bei 0, wenn die Seite geladen wird, und treibt die Uhr vor. Dies ist die Standard-Animationszeitachse und war bisher die einzige Animationszeitachse, auf die Sie Zugriff hatten.
In der Spezifikation für scrollbare Animationen sind zwei neue Arten von Zeitachsen definiert, die Sie verwenden können:
- Zeitleiste für den Scrollfortschritt: Eine Zeitachse, die mit der Scrollposition eines Scrollcontainers entlang einer bestimmten Achse verknüpft ist.
- Fortschritts-Zeitachse ansehen: Eine Zeitachse, die mit der relativen Position eines bestimmten Elements innerhalb seines Scroll-Containers verknüpft ist.
Zeitleiste für Scrollfortschritt
Eine Zeitleiste für den Scrollfortschritt ist eine Animationszeitachse, die mit dem Fortschritt an der Scrollposition eines Scrollcontainers (auch scrollport oder scroller genannt) entlang einer bestimmten Achse verknüpft ist. Dabei wird eine Position im Scrollbereich in einen Prozentsatz des Fortschritts umgewandelt.
Die Scrollposition am Anfang repräsentiert einen Fortschritt von 0% und die abschließende Scrollposition einen Fortschritt von 100 %. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% bis 100% hoch wird, wenn Sie den Bildlauf von oben nach unten durchlaufen.
✨ Jetzt ausprobieren
Eine Zeitleiste für den Scroll-Fortschritt wird oft einfach als „Scroll-Zeitachse“ abgekürzt.
Fortschrittszeitachse ansehen
Diese Art von Zeitachse ist mit dem relativen Fortschritt eines bestimmten Elements innerhalb eines Scroll-Containers verknüpft. Genau wie bei einer Zeitleiste für den Scrollfortschritt wird der Scrollversatz eines Scrollers erfasst. Im Gegensatz zu einer Zeitleiste für den Scroll-Fortschritt ist es die relative Position eines Objekts innerhalb dieses Scrollers, die den Fortschritt bestimmt.
Dies ist in etwa mit der Funktionsweise von IntersectionObserver vergleichbar, mit der erfasst werden kann, wie viel ein Element im Scroller sichtbar ist. Wenn das Element im Scroller nicht sichtbar ist, schneidet es sich nicht. Wenn es innerhalb des Scrollers sichtbar ist – selbst für den kleinsten Teil –, überschneidet es sich.
Die Zeitachse des Aufruffortschritts beginnt an dem Moment, an dem sich ein Motiv mit dem Scroller zu kreuzen beginnt, und endet, wenn das Objekt den Scroller nicht mehr kreuzt. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% anfängt, wenn das Subjekt den Scrollcontainer betritt, und dann 100% erreicht, sobald es den Scrollcontainer verlassen hat.
✨ Jetzt ausprobieren
Eine Zeitachse für den Aufruffortschritt wird oft einfach als einfach „Zeitachse ansehen“ abgekürzt. Es ist möglich, bestimmte Teile einer Ansichtszeitachse basierend auf der Größe des Motivs auszuwählen, aber dazu später mehr.
Übungen mit den Zeitleisten für den Scrollfortschritt
Anonyme Zeitleiste für den Scrollfortschritt 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.
Zulässige Werte für das Argument <scroller> sind:
nearest: Verwendet den nächstgelegenen Ancestor-Scrollcontainer (Standardeinstellung).root: Der Darstellungsbereich des Dokuments wird als Scrollcontainer verwendet.self: Das Element selbst wird als Scrollcontainer verwendet.
Zulässige Werte für das Argument <axis> sind:
block: Verwendet die Fortschrittsmessung entlang der Blockachse des Scrollcontainers (Standardeinstellung).inline: verwendet das Maß für den Fortschritt entlang der Inline-Achse des Scroll-Containers.y: verwendet das Maß für den Fortschritt entlang der Y-Achse des Scrollcontainers.x: verwendet das Maß für den Fortschritt entlang der x-Achse des Scroll-Containers.
Wenn Sie beispielsweise eine Animation an den Stamm-Scroller auf der Blockachse binden möchten, müssen Sie root und block an scroll() übergeben. Zusammen ergibt der Wert scroll(root block).
Demo: Lesefortschrittsanzeige
In dieser Demo ist oben im Darstellungsbereich eine Lesefortschrittsanzeige zu sehen. Wenn Sie auf der Seite nach unten scrollen, wird der Fortschrittsbalken größer, bis er am Ende des Dokuments die gesamte Breite des Darstellungsbereichs einnimmt. Zur Steuerung der Animation wird eine anonyme Zeitachse für den Scrollfortschritt verwendet.
✨ Jetzt ausprobieren
Die Anzeige für den Lesefortschritt wird oben auf der Seite entsprechend der festen Position angezeigt. Zur Nutzung von zusammengesetzten Animationen wird width nicht animiert, sondern das Element wird auf der X-Achse mithilfe einer 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();
}
Für die Zeitachse der Animation grow-progress für das #progress-Element ist eine anonyme Zeitachse festgelegt, die mit scroll() erstellt wird. scroll() werden keine Argumente übergeben, daher wird auf die Standardwerte zurückgesetzt.
Der Standard-Scroller, der verfolgt werden soll, ist nearest und die Standardachse ist block. Damit wird effektiv der Stamm-Scroller gezielt angesprochen, da dieser der nächstgelegene Scroller des #progress-Elements ist, während seine Blockrichtung verfolgt wird.
Benannte Zeitleiste für den Scrollfortschritt in CSS erstellen
Alternativ können Sie eine Zeitleiste für den Scrollfortschritt definieren, indem Sie eine benannte verwenden. Sie ist etwas ausführlicher, kann sich aber als nützlich erweisen, wenn Sie nicht auf einen übergeordneten Scroller oder den Stamm-Scroller abzielen, wenn die Seite mehrere Zeitachsen verwendet oder die automatische Suche nicht funktioniert. Auf diese Weise können Sie eine Zeitleiste für den Scrollfortschritt anhand des Namens identifizieren, den Sie ihr gegeben haben.
Wenn Sie eine benannte Zeitleiste für den Scrollfortschritt für ein Element erstellen möchten, legen Sie die CSS-Eigenschaft scroll-timeline-name für den Scrollcontainer auf eine gewünschte Kennung fest. Der Wert muss mit -- beginnen.
Um zu optimieren, welche Achse erfasst werden soll, deklarieren Sie auch die Property scroll-timeline-axis. Zulässige Werte entsprechen dem <axis>-Argument von scroll().
Um schließlich die Animation mit der Zeitleiste für den Scrollfortschritt zu verknüpfen, legen Sie die Eigenschaft animation-timeline für das Element, das animiert werden muss, auf denselben Wert wie die Kennung fest, die für scroll-timeline-name verwendet wird.
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 Abkürzung scroll-timeline kombinieren. Beispiel:
scroll-timeline: --my-scroller inline;
Demo: Schrittanzeige im horizontalen Karussell
In dieser Demo wird über jedem Bilderkarussell eine Schrittanzeige eingeblendet. Wenn ein Karussell drei Bilder enthält, beginnt die Anzeigeleiste bei 33% Breite und zeigt so an, dass Sie sich gerade das erste von drei Bildern ansehen. Wenn das letzte Bild zu sehen ist – was davon ausgeht, dass der Scroller zum Ende gescrollt hat – nimmt die Anzeige die volle Breite des Scrollers ein. Eine benannte Zeitleiste für den Scrollfortschritt wird zur Steuerung der Animation verwendet.
✨ Jetzt ausprobieren
Das grundlegende Markup für eine Galerie sieht so aus:
<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 ist absolut innerhalb des Wrapper-Elements .gallery positioniert. Die 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 fest und ist das Element, das scrollt. Durch das Verfolgen der Scrollposition wird .gallery__progress animiert. Dazu wird die benannte Zeitleiste für den Scroll-Fortschritt --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;
}
Zeitachse für den Scrollfortschritt mit JavaScript erstellen
Um eine Scroll-Zeitachse in JavaScript zu erstellen, musst du eine neue Instanz der ScrollTimeline-Klasse erstellen. Übergeben Sie mit den source und axis, die Sie erfassen möchten, eine Property-Bag.
source: ein Verweis auf das Element, dessen Scroller Sie verfolgen möchten. Verwenden Siedocument.documentElement, um ein Targeting auf den Stamm-Scroller vorzunehmen.axis: Legt fest, welche Achse erfasst werden soll. Ähnlich wie bei der Preisvergleichsportal-Variante sindblock,inline,xundyzulässig.
const tl = new ScrollTimeline({
source: document.documentElement,
});
Um es an eine Webanimation anzuhängen, übergeben Sie es als timeline-Eigenschaft und lassen Sie ggf. duration weg.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
Demo: Lesefortschrittsanzeige, noch einmal
Um die Lesefortschrittsanzeige mit JavaScript neu zu erstellen und 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 verfolgt den Stamm-Scroller und skaliert #progress auf der x-Achse vom 0% auf 100 %, wenn Sie auf der Seite scrollen.
✨ Jetzt ausprobieren
Praktische Übungen mit der Zeitachse zum Ansehen des Fortschritts
In CSS eine Zeitachse für den anonymen Wiedergabefortschritt erstellen
Zum Erstellen einer Zeitachse für den Aufruffortschritt verwenden Sie die Funktion view(). Die zulässigen Argumente sind <axis> und <view-timeline-inset>.
<axis>ist mit der Zeitleiste für den Scroll-Fortschritt identisch und definiert, welche Achse erfasst 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 gilt oder nicht. Der Wert muss ein Prozentsatz oderautosein, wobeiautoder Standardwert ist.
Wenn Sie beispielsweise eine Animation an ein Element binden möchten, das sich mit seinem Scroller auf der Blockachse überschneidet, verwenden Sie view(block). Ähnlich wie bei scroll() legen Sie diesen Wert als Wert für die Property animation-timeline fest und vergessen Sie nicht, animation-duration auf auto zu setzen.
Mithilfe des folgenden Codes werden alle img eingeblendet, wenn sie den Darstellungsbereich durchqueren, während Sie scrollen.
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: Zeitachsen ansehen
Eine mit der Zeitachse verknüpfte Animation wird standardmäßig an den gesamten Zeitachsenbereich angehängt. Dies beginnt mit dem Zeitpunkt, an dem das Motiv in den Scrollport gelangt, und endet, wenn das Subjekt den Scrollport vollständig verlassen hat.
Sie können sie auch mit einem bestimmten Teil der Zeitachse verknüpfen, indem Sie den Bereich angeben, an den sie angehängt werden soll. Dies kann beispielsweise nur der Fall sein, wenn das Motiv in den Scroller gelangt. In der folgenden Visualisierung beginnt der Fortschritt bei 0 %, wenn das Subjekt den Scrollcontainer betritt, aber bereits 100% erreicht, nachdem es sich vollständig kreuzt.
Die folgenden Zeitspannen für die Ansicht der Zeitachsen können für das Targeting verwendet werden:
cover: Stellt den gesamten Bereich der Zeitachse für den Aufrufverlauf dar.entry: Stellt den Bereich dar, in dem das Hauptkontofeld in den Sichtbarkeitsbereich der Ansicht eintritt.exit: Stellt den Bereich dar, in dem das Hauptkontofeld den Sichtbarkeitsbereich der Ansicht verlässt.entry-crossing: Stellt den Bereich dar, in dem die Hauptkasten den Endrahmen überschreitet.exit-crossing: Stellt den Bereich dar, in dem die Hauptkasten den Startrand überschreitet.contain: Stellt den Bereich dar, in dem das Hauptkonto vollständig im Sichtbarkeitsbereich des Ansichtsfortschritts innerhalb des Scrollports entweder vollständig enthalten ist oder vollständig abdeckt. Das hängt davon ab, ob das Motiv höher oder kürzer als der Scroller ist.
Wenn Sie einen Bereich definieren möchten, müssen Sie einen „Anfang“ und „Bereichsende“ festlegen. Jeder davon besteht aus einem Bereichsnamen (siehe Liste oben) und einem Bereichsversatz, um die Position innerhalb dieses Bereichsnamens zu bestimmen. Der Bereichsversatz ist normalerweise ein Prozentsatz zwischen 0% und 100%. Sie können aber auch eine feste Länge wie 20em angeben.
Wenn Sie beispielsweise eine Animation ab dem Moment ausführen möchten, in dem das Motiv beginnt, wählen Sie entry 0% als Bereichsstart aus. Wählen Sie entry 100% als Wert für das Bereichsende aus, wenn der Test bis zum Beginn des Gesprächs abgeschlossen sein soll.
In CSS legen Sie diesen Wert mit der Eigenschaft animation-range fest. Beispiel:
animation-range: entry 0% entry 100%;
Verwenden Sie in JavaScript die Eigenschaften 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. Versuchen Sie, den Anfang des Bereichs auf entry 0% und das Ende des Bereichs auf cover 50% festzulegen. Ziehen Sie dann die Bildlaufleiste, um das Animationsergebnis zu sehen.
Aufzeichnung ansehen
Wie Sie beim Spielen mit diesem Tool für Zeitachsen-Bereiche sehen, können einige Bereiche mit zwei verschiedenen Kombinationen aus Bereichsname und Bereichsversatz gezielt angesprochen werden. Beispielsweise sind entry 0%, entry-crossing 0% und cover 0% alle auf dieselbe Region ausgerichtet.
Wenn der Anfang und das Ende des Bereichs auf denselben Bereichsnamen ausgerichtet sind und den gesamten Bereich umfassen – 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 den viel kürzeren animation-range: entry umgeschrieben werden.
Demo: Bild einblenden
Diese Demo wird eingeblendet, wenn die Bilder in den Scrollport gelangen. Dazu wird eine Zeitachse für die anonyme Ansicht verwendet. Der Animationsbereich wurde optimiert, sodass jedes Bild eine vollständige Deckkraft aufweist, wenn es sich auf halber Strecke des Scrollers befindet.
✨ Jetzt ausprobieren
Der Einblendungseffekt wird mithilfe eines animierten Clip-Pfads erzielt. Der für diesen Effekt verwendete CSS-Code lautet:
@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 den Aufruffortschritt in CSS erstellen
Ähnlich wie bei Zeitachsen für Scroll-Zeitleisten können Sie auch benannte Versionen von Zeitachsen erstellen. Anstelle der scroll-timeline-*-Properties verwenden Sie Varianten mit dem Präfix view-timeline-, nämlich view-timeline-name und view-timeline-axis.
Es gelten die gleichen Werte und die gleichen Regeln für die Suche nach einer benannten Zeitachse.
Demo: Bild einblenden, erneut aufgerufen
Durch die Überarbeitung der zuvor gezeigten Demo sieht der überarbeitete Code 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ächstgelegenen Scrollers erfasst. Derselbe Wert wird dann als Wert für das Attribut animation-timeline verwendet. Die visuelle Ausgabe sieht genauso aus wie zuvor.
✨ Jetzt ausprobieren
Eine Zeitachse für den Aufruffortschritt in JavaScript erstellen
Um eine Zeitachse für die Ansicht in JavaScript zu erstellen, müssen Sie eine neue Instanz der ViewTimeline-Klasse erstellen. Übergeben Sie eine Property-Tasche mit der subject, die Sie verfolgen möchten, axis und inset.
subject: ein Verweis auf das Element, das Sie innerhalb des eigenen Scrollers verfolgen möchten.axis: Die zu verfolgende Achse. Ähnlich wie bei der Preisvergleichsportal-Variante sindblock,inline,xundyzulässig.inset: Eine (positive) oder Outset-(negativ) Anpassung des Scrollports, wenn ermittelt wird, ob das Feld sichtbar ist.
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
Um es an eine Webanimation anzuhängen, übergeben Sie es als timeline-Eigenschaft und lassen Sie ggf. duration weg. 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%',
});
✨ Jetzt ausprobieren
Weitere Möglichkeiten
Anhängen an mehrere Bereiche der Ansicht „Zeitachse“ mit einem Satz von Keyframes
Sehen wir uns diese Demo der Kontaktliste an, in der die Listeneinträge animiert sind. Wenn ein Listeneintrag in den Scrollport von unten eintritt, wird er eingeschoben und eingeblendet. Sobald er den Scrollport oben verlässt, verschwindet er.
✨ Jetzt ausprobieren
In dieser Demo wird jedes Element mit einer Ansichts-Zeitachse geschmückt, die das Element beim Überqueren des Scroll-Ports verfolgt. Es sind jedoch zwei scroll-gesteuerte Animationen hinzugefügt. Die animate-in-Animation wird an den entry-Bereich der Zeitachse angehängt, die animate-out-Animation im exit-Bereich der Zeitachse.
@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 laufen zu lassen, die an zwei verschiedene Bereiche angehängt sind, können Sie auch einen Satz Keyframes erstellen, der die Bereichsinformationen bereits 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, musst du animation-range nicht angeben. Das Ergebnis ist dasselbe wie vorher.
✨ Jetzt ausprobieren
An eine Scroll-Zeitachse ohne Ancestor anhängen
Der Suchmechanismus für benannte Scroll-Zeitachsen und benannte Zeitachsendiagramme ist auf Scroll-Ancestors beschränkt. Sehr oft ist das Element, das animiert werden muss, jedoch kein untergeordnetes Element des Scrollers, der verfolgt werden muss.
Dazu kommt die Property timeline-scope ins Spiel. Sie verwenden diese Eigenschaft, um eine Zeitachse mit diesem Namen zu deklarieren, ohne sie tatsächlich zu erstellen. Dadurch erhält die Zeitachse mit diesem Namen einen größeren Umfang. In der Praxis verwenden Sie die Eigenschaft timeline-scope für ein gemeinsames übergeordnetes Element, damit die Zeitachse eines untergeordneten Scrollers an dieses Element angehängt werden kann.
Beispiel:
.parent {
timeline-scope: --tl;
}
.parent .scroller {
scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
animation: animate linear;
animation-timeline: --tl;
}
Dabei gilt:
- Das
.parent-Element deklariert eine Zeitachse mit dem Namen--tl. Jedes untergeordnete Element davon kann ihn finden und als Wert für das Attributanimation-timelineverwenden. - Das
.scroller-Element definiert eine Scroll-Zeitachse mit dem Namen--tl. Standardmäßig ist sie nur für die untergeordneten Elemente sichtbar, aber da.parentalsscroll-timeline-rootfestgelegt ist, wird sie an das Objekt angehängt. - Für das
.subject-Element wird die--tl-Zeitachse verwendet. Er geht seinen Ancestor-Baum hinauf und findet--tlauf der.parent. Wenn--tlauf.parentauf--tlvon.scrollerverweist, verfolgt.subjectim Grunde die Zeitleiste für den Scrollfortschritt von.scroller.
Anders ausgedrückt: Sie können timeline-root verwenden, um eine Zeitachse zu einem Ancestor (auch als Hebevorgang bezeichnet) zu verschieben, sodass alle untergeordneten Elemente des Ancestors darauf zugreifen können.
Die Eigenschaft timeline-scope kann sowohl mit Zeitachsen-Scroll- als auch mit Ansichts-Zeitachsen verwendet werden.
Weitere Demos und Ressourcen
Alle Demos, die in diesem Artikel zur Mini-Website scroll-driven-animations.style behandelt werden Die Website enthält viele weitere Demos, um zu zeigen, was mit Scroll-gesteuerten Animationen möglich ist.
Eines der zusätzlichen Demos ist diese Liste mit Albumcovern. Jede Abdeckung dreht sich in 3D, wenn sie die Mitte des Scheinwerfers einnimmt.
✨ Jetzt ausprobieren
Oder diese Stapelkarten-Demo, in der position: sticky verwendet wird. Wenn die Karten gestapelt werden, werden die bereits hängenden Karten verkleinert, was einen schönen Tiefeneffekt erzeugt. Am Ende verschwindet der gesamte Stapel als Gruppe aus dem Bild.
✨ Jetzt ausprobieren
Auf scroll-driven-animations.style finden Sie außerdem eine Sammlung von Tools wie die Visualisierung „View Timeline Range Progress“ (Zeitleistenfortschritt ansehen), die bereits in diesem Beitrag erwähnt wurde.
Auf der Google I/O 2023 vorgestellte Animationen wurden außerdem unter What’s new in Web Animations behandelt.