Erste Schritte mit scrollbaren Animationen in CSS

1. Hinweis

Mit scrollgesteuerten Animationen können Sie die Wiedergabe einer Animation anhand der Scrollposition eines Scrollcontainers steuern. Das bedeutet, dass die Animation beim Scrollen nach oben oder unten vor- oder zurückgespult wird. Außerdem können Sie mit scrollgesteuerten Animationen eine Animation auch anhand der Position eines Elements innerhalb des Scrollcontainers steuern. So lassen sich interessante Effekte wie ein Parallax-Hintergrundbild, Scroll-Fortschrittsbalken und Bilder erstellen, die beim Einblenden sichtbar werden.

In Chrome 115 wird eine Reihe von JavaScript-Klassen und CSS-Eigenschaften unterstützt, mit denen Sie ganz einfach deklarative scrollgesteuerte Animationen erstellen können. Diese neuen APIs funktionieren in Verbindung mit den vorhandenen Web Animations- und CSS Animations-APIs.

In diesem Codelab erfahren Sie, wie Sie scrollgesteuerte Animationen mit CSS erstellen. Nach Abschluss dieses Codelabs sind Sie mit den vielen neuen CSS-Eigenschaften vertraut, die mit dieser spannenden Funktion eingeführt wurden, z. B. scroll-timeline, view-timeline, animation-timeline und animation-range.

Hinweis: Das JavaScript-Pendant, das in der Spezifikation für scrollgesteuerte Animationen bereitgestellt wird, wird in diesem Codelab nicht behandelt.

Lerninhalte

• Parallax-Hintergrundeffekt mit einer Scroll-Timeline in CSS erstellen
• Fortschrittsbalken mit einer Scroll-Timeline in CSS erstellen
• Effekt zum Einblenden von Bildern mit einer View-Timeline in CSS erstellen
• Verschiedene Arten von Bereichen einer View-Timeline in CSS verwenden

Voraussetzungen

Eine der folgenden Gerätekombinationen:

• Eine aktuelle Version von Chrome (115 oder höher) unter ChromeOS, macOS oder Windows, wobei das Flag „Experimental Web Platform Features“ aktiviert ist.
• Grundkenntnisse in HTML
• Grundkenntnisse in CSS, insbesondere Animationen in CSS

2. Einrichten

Alles, was Sie für dieses Projekt benötigen, ist in einem GitHub-Repository verfügbar. Klonen Sie zuerst den Code und öffnen Sie ihn in Ihrer bevorzugten Entwicklungsumgebung.

1. Öffnen Sie einen neuen Browsertab und rufen Sie https://github.com/googlechromelabs/io23-scroll-driven-animations-codelab auf.
2. Klonen Sie das Repository.
3. Öffnen Sie den Code in Ihrer bevorzugten IDE.
4. Führen Sie npm install aus, um die Abhängigkeiten zu installieren.
5. Führen Sie npm start aus und rufen Sie http://localhost:3000/ auf.
6. Alternativ können Sie die Datei src/index.html in Chrome öffnen, wenn Sie npm nicht installiert haben.

3. Animationstimelines

Standardmäßig wird eine Animation, die an ein Element angehängt ist, auf der Dokument-Timeline ausgeführt. Das bedeutet, dass die Animation beim Laden der Seite mit der Zeit voranschreitet. Dies ist die Standard-Animationstimeline und war bisher die einzige Animationstimeline, auf die Sie Zugriff hatten.

Mit scrollgesteuerten Animationen erhalten Sie Zugriff auf zwei neue Arten von Timelines:

• Scroll-Fortschrittstimeline
• View-Fortschrittstimeline

In CSS können diese Timelines mit der Eigenschaft animation-timeline an eine Animation angehängt werden. Sehen Sie sich an, was diese neuen Timelines bedeuten und wie sie sich voneinander unterscheiden.

Scroll-Fortschrittstimeline

Eine Scroll-Fortschrittstimeline ist eine Animationstimeline, die mit dem Fortschritt der Scrollposition eines Scrollcontainers – auch Scrollport oder Scroller genannt – entlang einer bestimmten Achse verknüpft ist. Sie wandelt eine Position in einem Scrollbereich in einen Prozentsatz des Fortschritts entlang einer Timeline um.

Die Startscrollposition entspricht 0% Fortschritt und die Endscrollposition 100% Fortschritt. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% auf 100% steigt, wenn Sie im Scroller nach unten scrollen.

View-Fortschrittstimeline

Diese Art von Timeline ist mit dem relativen Fortschritt eines bestimmten Elements innerhalb eines Scrollcontainers verknüpft. Wie bei einer Scroll-Fortschrittstimeline wird der Scroll-Offset eines Scrollers erfasst. Im Gegensatz zu einer Scroll-Fortschrittstimeline wird der Fortschritt jedoch durch die relative Position eines Objekts innerhalb dieses Scrollers bestimmt. Das ist vergleichbar mit IntersectionObserver, das erfasst, wie viel von einem Element im Scroller sichtbar ist. Wenn das Element im Scroller nicht sichtbar ist, gibt es keine Überschneidung. Wenn es im Scroller sichtbar ist – auch nur teilweise –, gibt es eine Überschneidung.

Eine View-Fortschrittstimeline beginnt in dem Moment, in dem sich ein Objekt mit dem Scroller überschneidet, und endet, wenn sich das Objekt nicht mehr mit dem Scroller überschneidet. In der folgenden Visualisierung sehen Sie, dass der Fortschritt von 0% ansteigt, wenn das Objekt in den Scrollcontainer eintritt, und 100% erreicht, wenn es den Scrollcontainer verlässt.

Standardmäßig ist eine Animation, die mit der View-Fortschrittstimeline verknüpft ist, an den gesamten Bereich angehängt. Sie beginnt in dem Moment, in dem das Objekt in den Scrollport eintritt, und endet, wenn das Objekt den Scrollport verlässt.

Sie können sie auch mit einem bestimmten Teil der View-Fortschrittstimeline verknüpfen, indem Sie den Bereich angeben, an den sie angehängt werden soll. Das kann beispielsweise nur dann der Fall sein, wenn das Objekt in den Scroller eintritt. In der folgenden Visualisierung beginnt der Fortschritt bei 0 %, wenn das Objekt in den Scrollcontainer eintritt, erreicht aber bereits 100 %, sobald es sich vollständig überschneidet.

Die möglichen Bereiche der View-Timeline, die Sie verwenden können, sind cover, contain, entry, exit, entry-crossing, und exit-crossing. Diese Bereiche werden später in diesem Codelab erläutert. Wenn Sie es kaum erwarten können, mehr zu erfahren, verwenden Sie das Tool unter https://goo.gle/view-timeline-range-tool, um zu sehen, was die einzelnen Bereiche darstellen.

4. Parallax-Hintergrundeffekt erstellen

Der erste Effekt, der der Seite hinzugefügt werden soll, ist ein Parallax-Hintergrundeffekt auf dem Hauptbild. Wenn Sie auf der Seite nach unten scrollen, soll sich das Hintergrundbild bewegen, aber mit einer anderen Geschwindigkeit. Dazu verwenden Sie eine Scroll-Fortschrittstimeline.

Für die Implementierung sind zwei Schritte erforderlich:

1. Erstellen Sie eine Animation, die die Position des Hintergrundbilds ändert.
2. Verknüpfen Sie die Animation mit dem Scrollfortschritt des Dokuments.

Animation erstellen

1. Verwenden Sie zum Erstellen der Animation eine normale Reihe von Keyframes. Verschieben Sie darin die Hintergrundposition von 0% vertikal auf 100%:

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

2. Hängen Sie diese Keyframes jetzt an das Body-Element an:

src/styles.css

body {
  animation: 1s linear move-background;
}

Mit diesem Code wird die Animation move-background dem Body-Element hinzugefügt. Die Eigenschaft animation-duration ist auf eine Sekunde festgelegt und es wird eine linear-Beschleunigungsfunktion verwendet.

Hinweis: Wenn Sie die CSS-Datei speichern und die Website in Ihrem Browser aufrufen, sehen Sie, dass sich der Hintergrund beim Laden der Seite bewegt. Das ist normal, da Sie noch keine Scroll-Timeline angehängt haben. Die Animation wird auf der Standard-Dokument-Timeline ausgeführt.

Animation mit einer anonymen Scroll-Fortschrittstimeline mit dem Scrollfortschritt des Root-Elements verknüpfen

Die einfachste Möglichkeit, eine Scroll-Fortschrittstimeline zu erstellen, ist die Verwendung der Funktion scroll(). Dadurch wird eine anonyme Scroll-Fortschrittstimeline erstellt, die Sie als Wert für die Eigenschaft animation-timeline festlegen können.

Die scroll() Funktion akzeptiert die Argumente <scroller> und <axis>.

Zulässige Werte für das <scroller> Argument sind:

• nearest: Verwendet den nächstgelegenen übergeordneten Scrollcontainer (Standard).
• root: Verwendet den Dokument-Viewport als Scrollcontainer.
• self: Verwendet das Element selbst als Scrollcontainer.

Zulässige Werte für das <axis> Argument sind:

• block: Verwendet das Maß für den Fortschritt entlang der Blockachse des Scrollcontainers (Standard).
• inline: Verwendet das Maß für den Fortschritt entlang der Inlineachse des Scrollcontainers.
• 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 Scrollcontainers.

Um die Animation mit dem Root-Scroller auf der Blockachse zu verknüpfen, müssen Sie root und block an scroll() übergeben. Zusammen ergibt sich der Wert scroll(root block).

• Legen Sie scroll(root block) als Wert für die Eigenschaft animation-timeline für das Body-Element fest.
• Da eine animation-duration in Sekunden keinen Sinn ergibt, legen Sie die Dauer auf auto fest. Wenn Sie keine animation-duration angeben, wird standardmäßig auto verwendet.

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}

Da der Root-Scroller auch der nächstgelegene übergeordnete Scroller für das Body-Element ist, können Sie auch den Wert nearest verwenden:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
}

Da nearest und block die Standardwerte sind, können Sie sie auch weglassen. In diesem Fall kann der Code so vereinfacht werden:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll();
}

Änderungen prüfen

Wenn alles funktioniert hat, sollten Sie jetzt Folgendes sehen:

Wenn nicht, sehen Sie sich den solution-step-1 Branch des Codes an.

5. Fortschrittsbalken für die Bildergalerie erstellen

Auf der Seite befindet sich ein horizontales Karussell, für das ein Fortschrittsbalken erforderlich ist, um anzuzeigen, welches Foto Sie gerade ansehen.

Das Markup für das Karussell sieht so aus:

src/index.html

<div class="gallery">
  <div class="gallery__scrollcontainer" style="--num-images: 3;">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
  </div>
</div>

Die Keyframes für den Fortschrittsbalken sind bereits vorhanden und sehen so aus:

src/styles.css

@keyframes adjust-progress {
  from {
    transform: scaleX(calc(1 / var(--num-images)));
  }
  to {
    transform: scaleX(1);
  }
}

Hinweis: Für diese Keyframes ist ein Startwert für scaleX() festgelegt, der auf der Anzahl der .gallery__entry-Elemente basiert, die der .gallery__scrollcontainer enthält. Dieser Wert wird durch die benutzerdefinierte Eigenschaft --num-children im Attribut „style“ des Scrollers bereitgestellt. So kann der Scrollbalken zu Beginn der Animation eine bestimmte Breite annehmen. Wenn sich beispielsweise vier Elemente im Scrollcontainer befinden, sollte die Startbreite des Fortschrittsbalkens 25 % betragen, da Sie Bild 1 von 4 sehen.

Diese Animation muss mit einer Scroll-Fortschrittstimeline an das Element .gallery__progress angehängt werden. Wie im vorherigen Schritt gezeigt, können Sie dies erreichen, indem Sie mit der Funktion scroll() eine anonyme Scroll-Fortschrittstimeline erstellen:

src/styles.css

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  animation-timeline: scroll(nearest inline);
}

Dieser Code scheint zwar zu funktionieren, tut es aber nicht. Das liegt daran, wie automatische Scrollcontainer-Lookups mit nearest funktionieren. Beim Suchen nach dem nächstgelegenen Scroller werden nur die Elemente berücksichtigt, die seine Position beeinflussen können. Da .gallery__progress absolut positioniert ist, ist das erste übergeordnete Element, das seine Position bestimmt, das Element .gallery, da position: relative angewendet wurde. Das bedeutet, dass das Element .gallery__scrollcontainer – der Scroller, der verwendet werden soll – bei diesem automatischen Lookup überhaupt nicht berücksichtigt wird.

Um dieses Problem zu umgehen, erstellen Sie eine benannte Scroll-Fortschrittstimeline für das Element .gallery__scrollcontainer und verknüpfen Sie .gallery__progress mit diesem Namen.

Benannte Scroll-Fortschrittstimeline erstellen und verknüpfen

Wenn Sie eine benannte Scroll-Fortschrittstimeline für ein Element erstellen möchten, legen Sie die CSS-Eigenschaft scroll-timeline-name für den Scrollcontainer auf einen beliebigen Wert fest. Der Wert muss mit -- beginnen.

Da die Galerie horizontal scrollt, müssen Sie auch die Eigenschaft scroll-timeline-axis festlegen. Zulässige Werte sind dieselben wie für das <axis> Argument von scroll().

Um die Animation mit der Scroll-Fortschrittstimeline zu verknüpfen, legen Sie die Eigenschaft animation-timeline für das zu animierende Element auf denselben Wert wie die Kennung fest, die für scroll-timeline-name verwendet wird.

• Ändern Sie die Datei styles.css so, dass sie Folgendes enthält:

src/styles.css

.gallery__scrollcontainer {
  /* Create the gallery-is-scrolling timeline */
  scroll-timeline-name: --gallery-is-scrolling;
  scroll-timeline-axis: inline;
}

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  /* Set gallery-is-scrolling as the timeline */
  animation-timeline: --gallery-is-scrolling;
}

Änderungen prüfen

Wenn alles funktioniert hat, sollten Sie jetzt Folgendes sehen:

Wenn nicht, sehen Sie sich den solution-step-2 Branch des Codes an.

6. Galeriebilder beim Ein- und Ausblenden animieren

Galeriebilder einblenden

Anonyme View-Fortschrittstimeline einrichten

Ein schöner Effekt ist das Einblenden der Galeriebilder, wenn sie sichtbar werden. Dazu können Sie eine View-Fortschrittstimeline verwenden.

Verwenden Sie zum Erstellen einer View-Fortschrittstimeline die Funktion view(). Zulässige Argumente sind <axis> und <view-timeline-inset>.

• Der <axis> ist derselbe wie bei der Scroll-Fortschrittstimeline und definiert, welche Achse erfasst werden soll.
• Mit <view-timeline-inset> können Sie einen Offset (positiv oder negativ) angeben, um die Grenzen anzupassen, wenn ein Element als sichtbar oder nicht sichtbar betrachtet wird.

Hinweis: Es ist nicht möglich, die <scroller> einer View-Timeline zu bestimmen, da immer das Objekt innerhalb des nächstgelegenen übergeordneten Scrollers erfasst wird.

• Die Keyframes sind bereits vorhanden, Sie müssen sie nur anhängen. Erstellen Sie dazu für jedes .gallery__entry-Element eine View-Fortschrittstimeline.

src/styles.css

@keyframes animate-in {
  from {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
}

Hinweis: Mit view() erstellen Sie eine anonyme View-Fortschrittstimeline. Ähnlich wie beim Erstellen einer benannten Scroll-Fortschrittstimeline können Sie mit speziellen Eigenschaften eine benannte View-Fortschrittstimeline erstellen. Die Eigenschaften sind view-timeline-name und view-timeline-axis. Sie funktionieren ähnlich wie ihre scroll-timeline-*-Pendants.

Bereich einer View-Fortschrittstimeline begrenzen

Wenn Sie das CSS speichern und die Seite laden, werden die Elemente eingeblendet, aber etwas scheint nicht zu stimmen. Sie beginnen mit der Deckkraft 0, wenn sie vollständig außerhalb des sichtbaren Bereichs sind, und erreichen erst die Deckkraft 1, wenn sie vollständig ausgeblendet sind.

Das liegt daran, dass der Standardbereich für eine View-Fortschrittstimeline der gesamte Bereich ist. Dieser Bereich wird als cover-Bereich bezeichnet.

1. Wenn Sie nur den entry-Bereich des Objekts verwenden möchten, begrenzen Sie mit der CSS-Eigenschaft animation-range, wann die Animation ausgeführt werden soll.

src/styles.css

.gallery__entry {
  animation: linear fade-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry 0% entry 100%;
}

Die Animation wird jetzt von entry 0% (das Objekt ist kurz davor, in den Scroller einzutreten) bis entry 100% (das Objekt ist vollständig in den Scroller eingetreten) ausgeführt.

Die möglichen Bereiche der View-Timeline sind:

• cover: Stellt den gesamten Bereich der View-Fortschrittstimeline dar.
• entry: Stellt den Bereich dar, in dem das Hauptfeld in den Sichtbarkeitsbereich der View-Fortschrittstimeline eintritt.
• exit: Stellt den Bereich dar, in dem das Hauptfeld den Sichtbarkeitsbereich der View-Fortschrittstimeline verlässt.
• entry-crossing: Stellt den Bereich dar, in dem das Hauptfeld die Endgrenze überschreitet.
• exit-crossing: Stellt den Bereich dar, in dem das Hauptfeld die Startgrenze überschreitet.
• contain: Stellt den Bereich dar, in dem das Hauptfeld entweder vollständig im Sichtbarkeitsbereich der View-Fortschrittstimeline innerhalb des Scrollports enthalten ist oder diesen vollständig abdeckt. Das hängt davon ab, ob das Objekt größer oder kleiner als der Scroller ist.

Verwenden Sie das Tool unter https://goo.gle/view-timeline-range-tool, um zu sehen, was die einzelnen Bereiche darstellen und wie sich die Prozentsätze auf die Start- und Endpositionen auswirken.

Hinweis: Es ist durchaus möglich, verschiedene Bereiche für den Start und das Ende von animation-range zu verwenden.

2. Da die Start- und Endbereiche hier identisch sind und die Standard-Offsets verwendet werden, vereinfachen Sie animation-range zu einem einzelnen Namen für den Animationsbereich:

src/styles.css

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry;
}

Galeriebilder ausblenden

• Wenn Sie die Bilder beim Verlassen des Scrollers ausblenden möchten, können Sie genauso vorgehen wie bei der Animation zum Einblenden, aber einen anderen Bereich verwenden.

src/styles.css

@keyframes animate-out {
  from {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  to {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in, linear animate-out;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry, exit;
}

Die Keyframes animate-in werden auf den Bereich entry und die Keyframes animate-out auf den Bereich exit angewendet.

Änderungen prüfen

Wenn alles funktioniert hat, sollten Sie jetzt Folgendes sehen:

Wenn nicht, sehen Sie sich den solution-step-3 Branch des Codes an.

7. Galeriebilder beim Ein- und Ausblenden mit einer Reihe von Keyframes animieren

Eine Reihe von Keyframes

Anstatt zwei Animationen an verschiedene Bereiche anzuhängen, können Sie eine Reihe von Keyframes erstellen, die bereits die Bereichsinformationen enthalten.

Die Keyframes sehen so aus:

@keyframes keyframes-name {
  range-name range-offset {
    ...
  }
  range-name range-offset {
    ...
  }
}

1. Kombinieren Sie die Keyframes zum Ein- und Ausblenden so:

src/styles.css

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  entry 90% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }

  exit 10% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  exit 100% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

2. Wenn die Bereichsinformationen in den Keyframes vorhanden sind, müssen Sie animation-range nicht mehr separat angeben. Hängen Sie die Keyframes als Eigenschaft animation an.

src/styles.css

.gallery__entry {
  animation: linear animate-in-and-out both;
  animation-duration: auto;
  animation-timeline: view(inline);
}

Änderungen prüfen

Wenn alles funktioniert hat, sollten Sie dasselbe Ergebnis wie im vorherigen Schritt erhalten. Wenn nicht, sehen Sie sich den solution-step-4 Branch des Codes an.

8. Glückwunsch!

Sie haben dieses Codelab abgeschlossen und wissen jetzt, wie Sie Scroll-Fortschrittstimelines und View-Fortschrittstimelines in CSS erstellen.

Weitere Informationen

Ressourcen:

• Elemente beim Scrollen mit scrollgesteuerten Animationen animieren
• Visualisierungstool für View-Timeline-Bereiche
• What's new in Web Animations (Google I/O ‘23)