Études de cas sur les animations liées au défilement

Swetha Gopalakrishnan

Saurabh Rajpal

Animations liées au défilement sont un modèle UX courant sur le Web. Un modèle basé sur le défilement est liée à la position de défilement d'un conteneur de défilement. Cela signifie que lorsque vous faites défiler l'écran vers le haut ou vers le bas, l'animation associée avance ou revient en arrière en réponse directe. Exemples : arrière-plan parallaxe, par exemple des images ou des indicateurs de lecture qui bougent lorsque vous faites défiler l'écran.

Les développeurs ont généralement créé des animations liées au défilement en utilisant JavaScript pour répondre aux événements de défilement sur le thread principal. Il est donc difficile de créer des animations basées sur le défilement performantes et synchronisées avec le défilement, en raison de les événements de défilement sont diffusés de manière asynchrone, ce qui entraîne souvent des à-coups en raison de sur le thread principal.

Toutefois, dans le cadre du nouveau Fonctionnalités CSS et UI disponibles dans les navigateurs, vous pouvez maintenant créer des animations déclaratives liées au défilement. Avec affichage et timelines de défilement La chronologie, les nouveaux concepts qui s'intègrent aux API Web Animations (WAAPI) et API CSS Animations vous obtenez un effet de sérénité des animations liées au défilement qui s'exécutent en dehors du thread principal, avec seulement quelques lignes de du code source. Dans cette étude de cas, vous allez découvrir en quoi Tokopedia, redBus et Policybazaar qui bénéficient déjà de cette nouvelle fonctionnalité.

Tokopedia

Tokopedia a remplacé ses précédentes implémentations JavaScript personnalisées par des Des animations liées au défilement pour optimiser les performances de leurs pages l'expérience de navigation globale sur l'entonnoir de conversion de l'e-commerce.

Nous avons réussi à réduire jusqu'à 80% de nos lignes de code par rapport à l'utilisation les événements de défilement JavaScript conventionnels et constaté que l'utilisation moyenne du processeur réduit de 50% à 2% pendant le défilement, Andy Wihalim, Ingénieur logiciel senior, Tokopedia

Code

L'implémentation suivante utilise la fonction scroll() pour définir un défilement anonyme timeline de progression pour contrôler la progression de l'animation CSS. La la visibilité de la barre persistante supérieure change en fonction de la position de défilement dans animationRange défini.

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 propose des animations différentes pour mobile et ordinateur choses à faire, qui s'affiche. au début de l'entonnoir de conversion auprès de tous les utilisateurs. Avec les animations liées au défilement, nous avons pu remplacer ces implémentations JavaScript personnalisées par CSS pour obtenir le même effet.

Cas d'utilisation

Galerie photo avec Image Reveal (Révélation d'images) (pour (pour mobile) et Cover Flow (pour ordinateur).

Code (mobile)

Dans l'exemple précédent, Tokopedia a utilisé la progression de défilement anonyme chronologie. Dans le code suivant, redBus utilise la progression de la vue nommée chronologie. L'animation modifie le opacity et le clip-path de <img>. dans le animation-range défini à l'intérieur de la zone de défilement de l'ancêtre, qui est dans ce cas le conteneur de défilement de la galerie photo.

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%;
   }
`;

Nous sommes ravis de découvrir cette fonctionnalité, car elle offre un excellent niveau de performances en améliorant l'expérience sur la page, en améliorant les signaux d'expérience sur la page pour le SEO. En plus de Sa phase d'apprentissage minimale en fait un outil incontournable pour toutes les plates-formes d'e-commerce sur votre site Web. Nous avons également reçu des commentaires positifs et le soutien d'autres équipes pour tirer parti des annonces dynamiques du Réseau de Recherche pour augmenter le nombre de parcours utilisateur— Amit Kumar, ingénieur principal responsable, redBus.

Policybazaar

La comparaison des régimes d'assurance est une action clé répétée par les utilisateurs pour guider leur le processus décisionnel. En utilisant des animations liées au défilement, Policybazaar a réduit la taille des éléments de faible priorité en réponse au défilement du tableau par l'utilisateur. Ce pour offrir une expérience de défilement fluide tout en améliorant la lisibilité.

Grâce aux animations liées au défilement, nous avons pu maximiser l'espace de la fenêtre d'affichage permet à l'utilisateur de comparer les forfaits, ce qui permet une lecture ciblée et claire expérience.—Rishabh Mehrotra, responsable de Design for Life Insurance BU, PolicyBazaar.

Code

Comme dans l'exemple précédent de Tokopedia, Policybazaar utilise le La fonction scroll() permettant de définir une chronologie anonyme de la progression du défilement pour en contrôlant la progression de l'animation CSS. Dans ce cas, réduire la police taille et un effet de fondu de l'en-tête en fonction de la position de défilement dans la plage définie 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;
  }
}

Animations basées sur le défilement comme modèle commun tout au long du parcours utilisateur

Toutes les entreprises d'e-commerce en vedette ont utilisé des animations basées sur le défilement sur les pages avec des cartes, en les animant pour attirer l'attention de l'utilisateur sur elles . La Les exemples suivants montrent des effets de défilement sur les cartes dans différentes parties de l'utilisateur du client. Pour ce faire, vous utilisez généralement une chronologie de progression de la vue anonyme. pour contrôler la progression de l'animation CSS personnalisée, comme indiqué dans l'extrait CSS suivant.

@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 (page d'accueil)

Policybazaar (page de la fiche produit)

Tokopedia (page d'informations détaillées sur le produit)

Éléments à prendre en compte lors de l'utilisation de l'API d'animations basées sur le défilement

Il est possible d'émuler des animations liées au défilement pour les navigateurs non compatibles, par exemple avec le Polyfill avec timeline de défilement. Si c'est le cas, cela nécessitent des tests supplémentaires pour vérifier qu'elle fonctionne bien avec votre et que les navigateurs utilisant le polyfill ne rencontrent pas d'animation en cas d'échec ou de saccades.

À partir du CSS, vous pouvez utiliser @supports pour tester la compatibilité de la timeline de l'animation. avant d'utiliser des animations liées au défilement. Exemple :

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

}

Ressources

• Démonstrations d'animations liées au défilement
• Animer des éléments lors du défilement avec des animations liées au défilement
• Atelier de programmation: Premiers pas avec les animations liées au défilement en CSS
• Extension Chrome: débogueur d'animations pilotées par défilement
• Polyfill avec timeline de défilement
• Voulez-vous signaler un bug ou une nouvelle fonctionnalité ? Votre avis nous intéresse

Lisez les autres articles de cette série, qui expliquent comment les entreprises d'e-commerce ont tiré parti des nouvelles fonctionnalités CSS et UI telles que les transitions de vues, les pop-ups, les requêtes de conteneur et le sélecteur has().

• Pourquoi les fonctionnalités de l'UI Web sont-elles importantes pour votre site d'e-commerce ?
• Consulter les études de cas sur Transitions
• Études de cas sur l'API Popover
• Études de cas sur les requêtes de conteneurs
• Études de cas sur sélecteur:has()