Diese Seite wurde von der Cloud Translation API übersetzt.

Fallstudien zu scrollbaren Animationen

Swetha Gopalakrishnan

Saurabh Rajpal

Scroll-animierte Elemente sind ein gängiges UX-Muster im Web. Eine scrollgesteuerte 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. Beispiele dafür sind Effekte wie Parallaxe-Hintergrundbilder oder Leseanzeigen, die sich beim Scrollen bewegen.

Bisher haben Entwickler in der Regel scrollgesteuerte Animationen mit JavaScript erstellt, um auf Scrollereignisse im Hauptthread zu reagieren. Dadurch ist es schwierig, leistungsstarke scrollgesteuerte Animationen zu erstellen, die mit dem Scrollen synchron sind, da Scroll-Ereignisse asynchron gesendet werden und häufig zu Verzögerungen führen, weil sie sich im Hauptthread befinden.

Im Rahmen der neuen CSS- und UI-Funktionen, die in Browsern eingeführt werden, können Sie jetzt deklarative scrollbasierte Animationen erstellen. Mit Scroll- und Ansichtszeitachsen, neuen Konzepten, die in die vorhandene Web Animations API (WAAPI) und CSS Animations API eingebunden werden, können Sie jetzt mit nur wenigen Codezeilen flüssige scrollbasierte Animationen über den Hauptthread ausführen. In dieser Fallstudie erfahren Sie, wie Tokopedia, redBus und Policybazaar bereits von dieser neuen Funktion profitieren.

Unterstützte Browser

Quelle

Tokopedia

Tokopedia ersetzte seine bisherigen benutzerdefinierten JavaScript-Implementierungen durch scrollbasierte Animationen, um die Seitenleistung zu optimieren und die allgemeine Browsererfahrung im gesamten E-Commerce-Conversion-Trichter zu verbessern.

Im Vergleich zu herkömmlichen JavaScript-Scrollereignissen konnten wir bis zu 80% unserer Codezeilen reduzieren. Dabei haben wir festgestellt, dass sich die durchschnittliche CPU-Nutzung beim Scrollen von 50% auf 2% reduziert hat – Andy Wihalim, Senior Software Engineer, Tokopedia

Die Sichtbarkeit der oberen fixierten Leiste wird je nach Scrollposition des Nutzers animiert geändert.

Code

In der folgenden Implementierung wird die Funktion scroll() verwendet, um eine anonyme Zeitachse für den Scrollvorgang festzulegen, mit der der Fortschritt der CSS-Animation gesteuert wird. Die Sichtbarkeit der oberen fixierten Leiste ändert sich je nach Scrollposition innerhalb des definierten animationRange.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

redBus bietet auf der Ding-to-do-Landingpage, die allen Nutzern zu Beginn des Conversion-Trichters angezeigt wird, verschiedene Animationen für Mobilgeräte und Computer. Mit scrollgesteuerten Animationen konnten sie diese benutzerdefinierten JavaScript-Implementierungen durch CSS ersetzen, um denselben Effekt zu erzielen.

Anwendungsfälle

Fotogalerie mit Image Reveal (für Mobilgeräte) und Cover Flow (für Computer).

Effekt für durch Scrollen gesteuertes Animationsbild zum Laden von Bildern in der redBus-Fotogalerie „Mögliche Aktivitäten“

Code (Mobilgerät)

Im vorherigen Beispiel hat Tokopedia die Zeitachse für den anonymen Scrollfortschritt verwendet. Im folgenden Code verwendet redBus die benannte Ansicht für den Fortschritt in der Zeitachse. Bei der Animation werden die opacity und clip-path des <img>-Elements innerhalb des definierten animation-range im nächsten übergeordneten Scroller des Elements geändert. In diesem Fall ist das der Scroller der Fotogalerie.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

Wir freuen uns sehr über diese Funktion, da sie eine perfekte Kombination aus Leistung und Nutzerfreundlichkeit bietet und unsere Signale zur Nutzerfreundlichkeit für die Suchmaschinenoptimierung verbessert. Außerdem ist die Lernkurve so gering, dass es für jede E-Commerce-Website ein Muss ist. Außerdem haben wir positives Feedback und Unterstützung von anderen Teams erhalten, die SDA für weitere User Journeys nutzen möchten. Amit Kumar, Senior Engineering Manager, redBus

Richtlinienbasar

Der Vergleich von Versicherungsplänen ist eine wiederkehrende wichtige Aktion, die Nutzer bei ihrer Entscheidungsfindung unternehmen. Mithilfe von scrollgesteuerten Animationen verkleinerte Policybazaar die Größe von Elementen mit niedriger Priorität, wenn der Nutzer durch die Tabelle scrollte. Dies führte zu einem reibungslosen Scrollen und verbesserte die Lesbarkeit.

Mit scrollbasierten Animationen konnten wir den Ansichtsbereich maximieren, damit Nutzer die Pläne vergleichen können. So wird eine konzentrierte und übersichtliche Leseerfahrung gewährleistet.—Rishabh Mehrotra, Head of Design for Life Insurance BU, PolicyBazaar.

Scroll-basierte Animation animate-timeline in der Vergleichstabelle für Anlage- und Lebensversicherungen.

Code

Ähnlich wie im vorherigen Beispiel von Tokopedia verwendet Policybazaar die Funktion scroll(), um einen anonymen Zeitplan für den Scrollvorgang festzulegen, um den Fortschritt der CSS-Animation zu steuern. In diesem Fall wird die Schriftgröße verkleinert und der Header wird abhängig von der Scrollposition innerhalb der definierten animation-range ausgeblendet.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

Scroll-basierte Animationen als gängiges Muster während der gesamten User Journey

Alle vorgestellten E-Commerce-Unternehmen haben auf Seiten mit Karten scrollbasierte Animationen verwendet, um die Aufmerksamkeit der Nutzer auf die Karten zu lenken . Die folgenden Beispiele zeigen Scrolleffekte auf Karten in verschiedenen Teilen des User Journey-Prozesses. Normalerweise wird dazu eine Zeitachse für den Fortschritt der anonymen Wiedergabe verwendet, um den Fortschritt der benutzerdefinierten CSS-Animation zu steuern, wie im folgenden CSS-Snippet gezeigt.

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

redBus (Startseite)

Durch Scrollen gesteuerte Animations-Einflugeffekt zum Laden von Produktkarten auf der redBus-Landingpage „Mögliche Aktivitäten“

PolicyBazaar (Seite mit Produktinformationen)

Scroll-basiertes Ein- und Ausblenden von Produktkarten in den Geschäftsbereichen „Investment“ und „Life“.

Tokopedia (Seite mit Produktdetails)

Ein- und Ausblendungsanimation beim Scrollen durch die aufgeführten Produkte.

Zu beachtende Punkte bei der Verwendung der Scroll-driven Animations API

Für nicht unterstützte Browser können scrollbare Animationen mit Polyfills erstellt werden, z. B. mit dem Scroll-Zeitachsen-Polyfill. In diesem Fall sind zusätzliche Tests erforderlich, um sicherzustellen, dass die polyfill gut mit Ihrem Framework funktioniert und dass in Browsern, die die polyfill verwenden, keine Animationsfehler auftreten oder die Nutzung hakelig ist.

In CSS können Sie @supports verwenden, um zu testen, ob die Animationszeitachse unterstützt wird, bevor Sie scrollbare Animationen verwenden. Beispiel:

@supports (animation-timeline: scroll()) {

}

Ressourcen

Demos für scrollbasierte Animationen
Elemente beim Scrollen mit Animationen animieren
Codelab: Erste Schritte mit scrollbaren Animationen in CSS
Chrome-Erweiterung: Scroll-driven animation debugger
Scroll-Timeline-Polyfill
Möchten Sie einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie Ansichtsübergängen, Pop-ups, Containerabfragen und der has()-Auswahl profitiert haben.