Fallstudien zu scrollbaren Animationen

Swetha Gopalakrishnan

Saurabh Rajpal

Scrollgesteuerte Animationen sind ein gängiges UX-Muster im Web. Durch Scrollen ist mit der Scrollposition eines Scrollcontainers verknüpft. Das bedeutet, dass beim Scrollen nach oben oder unten die verknüpfte Animation vorwärts oder rückwärts gleitet. im Direct-Response-Marketing. Beispiele dafür sind Effekte wie der Parallaxe-Hintergrund. Bilder oder Leseanzeigen, die sich beim Scrollen bewegen.

Scroll-gesteuerte Animationen werden in der Regel mithilfe von JavaScript von Entwicklern erstellt. um auf Scroll-Ereignisse im Hauptthread zu reagieren. Das erschwert die Erstellung leistungsstarke Scroll-gesteuerte Animationen, die synchron mit dem Scrollen sind. und Scroll-Ereignissen asynchron bereitgestellt werden. Dies führt häufig zu Verzögerungen aufgrund im Hauptthread sind.

Im Rahmen des neuen CSS- und UI-Funktionen werden in Browsern angezeigt, können Sie jetzt deklarative scrollbare Animationen erstellen. Mit Scroll-Zeitachsen und -Ansichten Zeitpläne, neue Konzepte, die sich in die Web Animations API (WAAPI) und CSS Animations API jetzt seidig glatt Scroll-gesteuerte Animationen, die über den Hauptthread ausgeführt werden. Code. In dieser Fallstudie erfahren Sie, wie Tokopedia, redBus und Policybazaar profitieren bereits von dieser neuen Funktion.

Tokopedia

Tokopedia ersetzte seine früheren benutzerdefinierten JavaScript-Implementierungen durch Scroll-gesteuerte Animationen, um die Seitenleistung zu optimieren Nutzererfahrung im gesamten E-Commerce-Conversion-Trichter zu verbessern.

Wir konnten bis zu 80% unserer Codezeilen reduzieren Herkömmliche JavaScript-Scrollereignisse beobachtet. Die durchschnittliche CPU-Auslastung beim Scrollen von 50% auf 2% reduziert. Andy Wihalim, Senior Software Engineer, Tokopedia

Code

Bei der folgenden Implementierung wird die Funktion scroll() verwendet, um ein anonymes Scrollen festzulegen. Fortschrittszeitachse zur Steuerung des Fortschritts der CSS-Animation. Die ändert sich die Sichtbarkeit der fixierten Leiste je nach Scrollposition im definiert: 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 verfügt über verschiedene Animationen für Mobilgeräte und Desktop-Computer Landingpage von things-to-do, die auf dieser Seite angezeigt wird: zu Beginn des Conversion-Trichters für alle Nutzer verfügbar sind. Durch scrollbare Animationen konnten wir diese benutzerdefinierten JavaScript-Implementierungen durch CSS ersetzen, um denselben Effekt haben.

Anwendungsfälle

Fotogalerie mit Image Reveal (für mobil) und Cover Flow (für Computer).

Code (mobil)

Im vorherigen Beispiel verwendete Tokopedia den anonymen Scrollfortschritt Zeitachse festlegen. Im folgenden Code verwendet redBus den benannten Ansichtsfortschritt Zeitachse festlegen. Durch die Animation werden opacity und clip-path von <img> geändert. -Element innerhalb der definierten animation-range innerhalb des nächstgelegenen Ancestor Scroller, in diesem Fall der Fotogalerie-Scroller.

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 Mischung aus mit einer besseren Nutzererfahrung, wodurch unsere Signale für die Nutzerfreundlichkeit von Seiten für SEO optimiert werden. Zusätzlich zu Aufgrund der minimalen Einarbeitungszeit ist es ein Muss für alle E-Commerce- Website. Wir erhielten auch positives Feedback und Unterstützung von anderen Teams, SDA für mehr User Journeys – Amit Kumar, Senior Engineering Manager, redBus.

Richtlinienbasar

Der Vergleich von Versicherungsplänen ist eine wiederholte wichtige Aktion, die Nutzer ergreifen, um ihre Entscheidungsfindungsprozess. Mit scrollbaren Animationen konnte PolicyBazaar den Größe von Elementen mit niedriger Priorität als Reaktion auf das Scrollen der Tabelle durch die Nutzenden. Dieses führte zu einem reibungslosen Scrollen und verbesserte die Lesbarkeit.

Mit scrollbaren Animationen konnten wir den Flächeninhalt des Darstellungsbereichs für die Nutzer Pläne vergleichen und so ein fokussiertes und übersichtliches Lesen ermöglichen Rishabh Mehrotra, Leiterin Design for Life Insurance BU, PolicyBazaar.

Code

Ähnlich wie im vorherigen Beispiel aus Tokopedia verwendet Policybazaar die Methode scroll()-Funktion zum Festlegen einer anonymen Zeitachse für den Scrollfortschritt für den Fortschritt der CSS-Animation. In diesem Fall wird die Schriftgröße Größe und Ausblenden der Kopfzeile basierend auf der Scrollposition innerhalb der definierten animation-range

@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-gesteuerte Animationen als häufiges Muster im Verlauf der User Journey

Alle vorgestellten E-Commerce-Unternehmen verwendeten Scroll-Animationen auf den Seiten. mit Kacheln, das Animieren von Karten, um die Aufmerksamkeit der Nutzenden auf sie zu lenken . Die Die folgenden Beispiele zeigen Scrolleffekte auf Karten in verschiedenen Teilen des Nutzers Reise. Dies wird in der Regel mithilfe einer anonymen Fortschrittszeitachse erreicht. zur Steuerung des Fortschritts der benutzerdefinierten CSS-Animation, wie im folgenden CSS-Snippet hinzu.

@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)

PolicyBazaar (Seite mit Produktinformationen)

Tokopedia (Seite mit Produktdetails)

Was Sie bei der Verwendung der Scroll-gesteuerten Animations API beachten sollten

Es ist möglich, scrollgesteuerte Animationen für nicht unterstützte Browser mit Polyfill zum Beispiel mit der Polyfill mit Scroll-Zeitachse Wenn Sie dies tun, sind zusätzliche Tests erforderlich, um sicherzustellen, und dass Browser, die Polyfill verwenden, keine Animation oder Störungen.

In CSS kannst du @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 scrollbare Animationen
• Elemente beim Scrollen mit Animationen animieren
• Codelab: Erste Schritte mit scrollbaren Animationen in CSS
• Chrome-Erweiterung: Debugger für scrollbare Animationen
• Polyfill mit Scroll-Zeitachse
• Möchtest du einen Fehler oder eine neue Funktion melden? Ihre Meinung ist uns wichtig.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie „Übergänge anzeigen“, „Popover“, „Containerabfragen“ und dem Selektor has() profitiert haben.

• Warum sind Funktionen der Weboberfläche für Ihre E-Commerce-Website wichtig?
• Fallstudien zu Übergängen ansehen
• Fallstudien zur Popover API
• Fallstudien zu Container Queries
• Fallstudien zur Auswahl von:has()