M

MLOG

Deutsch

Eine umfassende Anleitung zu CSS Scroll Timelines, einer leistungsstarken neuen Webanimationstechnik, die Animationen direkt mit der Scrollposition verknüpft. Erfahren Sie, wie Sie ansprechende und interaktive Benutzererlebnisse schaffen.

CSS Scroll Timeline: Animieren basierend auf der Scrollposition

Scrollgesteuerte Animationen revolutionieren das Webdesign und bieten ansprechende und interaktive Benutzererlebnisse, die über traditionelle statische Layouts hinausgehen. CSS Scroll Timelines bieten eine native Browserlösung zum Erstellen dieser Animationen, indem sie den Animationsfortschritt direkt mit der Scrollposition eines Elements verknüpfen. Dies eröffnet eine Welt kreativer Möglichkeiten zur Verbesserung der Benutzerinteraktion und des Storytellings im Web.

Was sind CSS Scroll Timelines?

Mit CSS Scroll Timelines können Sie den Fortschritt einer CSS-Animation oder eines Übergangs basierend auf der Scrollposition eines angegebenen Scroll-Containers steuern. Anstatt sich auf traditionelle zeitbasierte Animationen zu verlassen, bei denen die Animationsdauer festgelegt ist, ist der Animationsfortschritt direkt daran gebunden, wie weit ein Benutzer gescrollt hat. Dies bedeutet, dass die Animation als direkte Reaktion auf das Scrollverhalten des Benutzers pausiert, abgespielt, zurückgespult oder schnell vorgespult wird, wodurch ein natürlicheres und interaktiveres Erlebnis entsteht. Stellen Sie sich einen Fortschrittsbalken vor, der sich beim Scrollen auf einer Seite füllt, oder Elemente, die ein- und ausblenden, wenn sie in den Viewport gelangen – dies sind die Arten von Effekten, die mit CSS Scroll Timelines leicht zu erzielen sind.

Warum CSS Scroll Timelines verwenden?

Schlüsselkonzepte und Eigenschaften

Das Verständnis der Kernkonzepte und CSS-Eigenschaften ist entscheidend für die effektive Nutzung von Scroll Timelines:

1. Scroll Timeline

Die Eigenschaft scroll-timeline definiert den Scroll-Container, der als Timeline für die Animation verwendet werden soll. Sie können eine benannte Timeline angeben (z. B. --my-scroll-timeline) oder vordefinierte Werte wie auto (der nächste übergeordnete Scroll-Container), none (keine Scroll-Timeline) oder root (der Viewport des Dokuments) verwenden.

/* Define a named scroll timeline */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* Use the named timeline in the animation */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Animation Timeline

Die Eigenschaft animation-timeline weist einer Animation eine Scroll-Timeline zu. Diese Eigenschaft verknüpft den Fortschritt der Animation mit der Scrollposition des angegebenen Scroll-Containers. Sie können auch die Funktion view() verwenden, die eine Timeline basierend auf der Schnittmenge eines Elements mit dem Viewport erstellt.

/* Link the animation to the scroll timeline */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* Use view() for viewport-based animations */
.animated-element {
  animation-timeline: view();
}

3. Scroll Offsets

Scroll-Offsets definieren die Start- und Endpunkte der Scroll-Timeline, die dem Anfang und dem Ende der Animation entsprechen. Mit diesen Offsets können Sie genau steuern, wann die Animation basierend auf der Scrollposition startet und stoppt. Sie können Schlüsselwörter wie cover, contain, entry, exit und numerische Werte (z. B. 100px, 50%) verwenden, um diese Offsets zu definieren.

/* Animate when the element is fully visible */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* Start animation 100px from the top, end when bottom is 200px from viewport bottom */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Scroll Timeline Axis

Die Eigenschaft scroll-timeline-axis gibt die Achse an, entlang derer die Scroll-Timeline fortschreitet. Sie kann auf block (vertikales Scrollen), inline (horizontales Scrollen), both (beide Achsen) oder auto (vom Browser bestimmt) festgelegt werden. Bei Verwendung von `view()` wird empfohlen, die Achse explizit anzugeben.

/* Define the scroll timeline axis */
.scroll-container {
  scroll-timeline-axis: y;
}

/* With view */
.animated-element {
  scroll-timeline-axis: block;
}

5. Animation Range

Die Eigenschaft `animation-range` definiert die Scroll-Offsets (Start- und Endpunkte), die dem Anfang (0 %) und dem Ende (100 %) der Animation entsprechen. Auf diese Weise können Sie bestimmte Scrollpositionen dem Fortschritt der Animation zuordnen.

/* Map the entire scroll range to the animation */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* Start the animation halfway through the scroll range */
.animated-element {
  animation-range: 50% 100%;
}

/* Use pixel values */
.animated-element {
  animation-range: 100px 500px;
}

Praktische Beispiele und Anwendungsfälle

Lassen Sie uns einige praktische Beispiele untersuchen, wie Sie CSS Scroll Timelines verwenden können, um ansprechende Animationen zu erstellen:

1. Fortschrittsbalken

Ein klassischer Anwendungsfall für scrollgesteuerte Animationen ist ein Fortschrittsbalken, der sich beim Scrollen auf der Seite füllt. Dies gibt visuelles Feedback darüber, wie weit der Benutzer mit dem Inhalt fortgeschritten ist.

/* CSS */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 5px;
  background-color: #4CAF50;
  width: 0%;
  animation: fillProgressBar linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 0%;
  animation-fill-mode: forwards;
}

@keyframes fillProgressBar {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <p>... your content here ...</p>
</div>

Dieser Code erstellt einen festen Fortschrittsbalken am oberen Rand der Seite. Die Animation fillProgressBar erhöht die Breite des Fortschrittsbalkens schrittweise von 0 % auf 100 %, während der Benutzer auf der Seite nach unten scrollt. animation-timeline: view() verknüpft die Animation mit dem Scrollfortschritt des Viewports und `animation-range` verbindet das Scrollen mit dem visuellen Fortschritt.

2. Bildeinblendung

Sie können Scroll Timelines verwenden, um einen subtilen Einblendeffekt für Bilder zu erstellen, wenn sie in den Viewport gelangen, wodurch die visuelle Attraktivität Ihrer Inhalte verbessert wird.

/* CSS */
.fade-in-image {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn linear;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HTML */
<img src="image.jpg" class="fade-in-image" alt="Image">

Dieser Code blendet das Bild zunächst aus und positioniert es etwas unterhalb seiner endgültigen Position. Wenn das Bild in die Ansicht scrollt, erhöht die Animation fadeIn schrittweise die Deckkraft und verschiebt das Bild an seine ursprüngliche Position, wodurch ein sanfter Einblendeffekt entsteht. Der `animation-range` gibt an, dass die Animation beginnt, wenn der obere Rand des Bildes zu 25 % in den Viewport reicht, und endet, wenn der untere Rand zu 75 % in den Viewport reicht.

3. Sticky Elemente

Erzielen Sie "Sticky"-Effekte – bei denen Elemente beim Scrollen am oberen Rand des Viewports haften bleiben – jedoch mit erweiterter Steuerung und Übergängen. Stellen Sie sich eine Navigationsleiste vor, die sich beim Scrollen des Benutzers sanft in eine komprimierte Version verwandelt.

/*CSS*/
.sticky-container {
  height: 200px; /* Adjust to your needs */
  position: relative;
}

.sticky-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
  animation: stickyAnimation linear;
  animation-timeline: view();
  animation-range: entry 0% cover 20%; /* Adjust range as needed */
  animation-fill-mode: both;
  z-index: 10;
}

@keyframes stickyAnimation {
  0% {
    position: absolute;
    top: 0;
  }
  100% {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ddd; /* Change color to indicate stickiness */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">My Sticky Element</div>
</div>

In diesem Beispiel geht das Element von `position: absolute` zu `position: fixed` über, wenn es die obersten 20 % des Viewports erreicht, wodurch ein sanfter "Haft"-Effekt entsteht. Passen Sie den `animation-range` und die CSS-Eigenschaften innerhalb der Keyframes an, um das Verhalten anzupassen.

4. Parallax-Scrolling-Effekt

Erstellen Sie einen Parallax-Scrolling-Effekt, bei dem sich verschiedene Inhaltsebenen beim Scrollen des Benutzers mit unterschiedlichen Geschwindigkeiten bewegen, wodurch der Seite Tiefe und visuelles Interesse verliehen werden.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* Adjust to your needs */
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.parallax-layer--bg {
  background-image: url("background.jpg");
  animation: parallaxBg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

.parallax-layer--fg {
 background-image: url("foreground.png");
  animation: parallaxFg linear;
  animation-timeline: view();
  animation-range: entry 0% cover 100%;
  transform-origin: 50% 0%;
  animation-fill-mode: both;
}

@keyframes parallaxBg {
 to {
    transform: translateY(50px); /* Adjust for parallax speed */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* Adjust for parallax speed */
 }
}

/* HTML */
<div class="parallax-container">
  <div class="parallax-layer parallax-layer--bg"></div>
  <div class="parallax-layer parallax-layer--fg"></div>
</div>

In diesem Beispiel werden zwei Ebenen mit unterschiedlichen Hintergrundbildern erstellt. Die Animationen `parallaxBg` und `parallaxFg` verschieben die Ebenen mit unterschiedlichen Geschwindigkeiten, wodurch der Parallax-Effekt entsteht. Passen Sie die `translateY`-Werte in den Keyframes an, um die Geschwindigkeit jeder Ebene zu steuern.

5. Text-Reveal-Animation

Zeigen Sie Text Zeichen für Zeichen an, während der Benutzer an einem bestimmten Punkt vorbeiscrollt, um Aufmerksamkeit zu erregen und den Storytelling-Aspekt des Inhalts zu verbessern.

/* CSS */
.text-reveal-container {
  position: relative;
  overflow: hidden;
}

.text-reveal {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: textRevealAnimation steps(1) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 75%;
  animation-fill-mode: both;
  width: 0;
}

@keyframes textRevealAnimation {
  to {
    width: 100%;
  }
}

/* HTML */
<div class="text-reveal-container">
  <span class="text-reveal">This text will be revealed as you scroll.</span>
</div>

In diesem Beispiel wird die Timing-Funktion `steps(1)` verwendet, um den Text Zeichen für Zeichen anzuzeigen. `width: 0` blendet den Text zunächst aus, und die `textRevealAnimation` erhöht die Breite schrittweise, um den gesamten Text anzuzeigen. Passen Sie den `animation-range` an, um zu steuern, wann die Text-Reveal-Animation beginnt und endet.

Browserkompatibilität und Polyfills

CSS Scroll Timelines sind eine relativ neue Technologie, und die Browserunterstützung entwickelt sich noch. Stand Ende 2023 bieten gängige Browser wie Chrome und Edge guten Support. Firefox und Safari arbeiten aktiv an der Implementierung der Funktion. Es ist wichtig, die aktuelle Browserkompatibilität zu überprüfen, bevor Sie Scroll Timelines in der Produktion implementieren. Sie können Ressourcen wie Can I use verwenden, um den Supportstatus zu überprüfen.

Für Browser, die Scroll Timelines nicht nativ unterstützen, können Sie Polyfills verwenden, um eine ähnliche Funktionalität bereitzustellen. Ein Polyfill ist ein Stück JavaScript-Code, das die fehlende Funktion mit JavaScript implementiert. Für CSS Scroll Timelines sind mehrere Polyfills verfügbar, mit denen Sie die Funktion auch in älteren Browsern verwenden können.

Überlegungen zur Barrierefreiheit

Scrollgesteuerte Animationen können zwar die Benutzererfahrung verbessern, es ist jedoch wichtig, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihre Website für alle Benutzer, einschließlich Benutzer mit Behinderungen, nutzbar ist.

Bewährte Methoden und Tipps

Hier sind einige bewährte Methoden und Tipps für die effektive Verwendung von CSS Scroll Timelines:

Globale Überlegungen zum Animationsdesign

Beachten Sie beim Entwerfen von Animationen für ein globales Publikum die folgenden Punkte:

Fazit

CSS Scroll Timelines bieten eine leistungsstarke und effiziente Möglichkeit, ansprechende und interaktive Webanimationen zu erstellen. Indem Sie den Animationsfortschritt mit der Scrollposition verknüpfen, können Sie Erlebnisse schaffen, die dynamischer, reaktionsschneller und benutzerfreundlicher sind. Obwohl sich die Browserunterstützung noch entwickelt, machen die Vorteile der Verwendung von CSS Scroll Timelines – verbesserte Leistung, ein deklarativer Ansatz und eine verbesserte Benutzererfahrung – sie zu einem wertvollen Werkzeug für moderne Webentwickler. Denken Sie beim Experimentieren mit Scroll Timelines daran, der Barrierefreiheit Priorität einzuräumen und den globalen Kontext Ihres Publikums zu berücksichtigen, um wirklich integrative und ansprechende Weberlebnisse zu schaffen.

Nutzen Sie diese aufregende neue Technologie und erschließen Sie eine Welt kreativer Möglichkeiten für Ihre Webprojekte. Die Zukunft der Webanimation ist da und sie wird durch Scrollen angetrieben!

CSS Scroll Timeline: Animieren basierend auf der Scrollposition | MLOG