M

MLOG

Français

Un guide complet sur les chronologies de défilement CSS, une nouvelle technique d'animation web puissante qui lie les animations directement à la position de défilement.

Chronologie de Défilement CSS : Animer en Fonction de la Position de Défilement

Les animations pilotées par le défilement révolutionnent le design web, offrant des expériences utilisateur captivantes et interactives qui vont au-delà des mises en page statiques traditionnelles. Les chronologies de défilement CSS fournissent une solution native dans le navigateur pour créer ces animations, en liant directement la progression de l'animation à la position de défilement d'un élément. Cela ouvre un monde de possibilités créatives pour améliorer l'engagement de l'utilisateur et la narration sur le web.

Que sont les Chronologies de Défilement CSS ?

Les chronologies de défilement CSS vous permettent de contrôler la progression d'une animation ou d'une transition CSS en fonction de la position de défilement d'un conteneur de défilement spécifié. Au lieu de s'appuyer sur des animations traditionnelles basées sur le temps, où la durée de l'animation est fixe, la progression de l'animation est directement liée à la distance parcourue par l'utilisateur lors du défilement. Cela signifie que l'animation se mettra en pause, se jouera, reviendra en arrière ou avancera rapidement en réponse directe au comportement de défilement de l'utilisateur, créant une expérience plus naturelle et interactive. Imaginez une barre de progression qui se remplit à mesure que vous faites défiler une page, ou des éléments qui apparaissent et disparaissent en fondu lorsqu'ils entrent dans la fenêtre d'affichage – ce sont les types d'effets facilement réalisables avec les chronologies de défilement CSS.

Pourquoi Utiliser les Chronologies de Défilement CSS ?

Concepts et Propriétés Clés

Comprendre les concepts de base et les propriétés CSS est crucial pour utiliser efficacement les chronologies de défilement :

1. Chronologie de Défilement (Scroll Timeline)

La propriété scroll-timeline définit le conteneur de défilement à utiliser comme chronologie pour l'animation. Vous pouvez spécifier une chronologie nommée (par ex., --my-scroll-timeline) ou utiliser des valeurs prédéfinies comme auto (le conteneur de défilement ancêtre le plus proche), none (pas de chronologie de défilement), ou root (la fenêtre d'affichage du document).

/* Définir une chronologie de défilement nommée */
.scroll-container {
  scroll-timeline: --my-scroll-timeline;
}

/* Utiliser la chronologie nommée dans l'animation */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

2. Chronologie d'Animation (Animation Timeline)

La propriété animation-timeline assigne une chronologie de défilement à une animation. Cette propriété lie la progression de l'animation à la position de défilement du conteneur de défilement spécifié. Vous pouvez également utiliser la fonction view() qui crée une chronologie basée sur l'intersection d'un élément avec la fenêtre d'affichage.

/* Lier l'animation à la chronologie de défilement */
.animated-element {
  animation-timeline: --my-scroll-timeline;
}

/* Utiliser view() pour les animations basées sur la fenêtre d'affichage */
.animated-element {
  animation-timeline: view();
}

3. Décalages de Défilement (Scroll Offsets)

Les décalages de défilement définissent les points de départ et de fin de la chronologie de défilement qui correspondent au début et à la fin de l'animation. Ces décalages vous permettent de contrôler précisément quand l'animation commence et s'arrête en fonction de la position de défilement. Vous pouvez utiliser des mots-clés comme cover, contain, entry, exit, et des valeurs numériques (par ex., 100px, 50%) pour définir ces décalages.

/* Animer lorsque l'élément est entièrement visible */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: entry 0% cover 100%;
}

/* Démarrer l'animation à 100px du haut, terminer lorsque le bas est à 200px du bas de la fenêtre d'affichage */
.animated-element {
  scroll-timeline-axis: block;
  animation-timeline: view(block);
  animation-range: 100px exit 200px;
}

4. Axe de la Chronologie de Défilement (Scroll Timeline Axis)

La propriété scroll-timeline-axis spécifie l'axe le long duquel la chronologie de défilement progresse. Elle peut être réglée sur block (défilement vertical), inline (défilement horizontal), both (les deux axes), ou auto (déterminé par le navigateur). Lorsque vous utilisez `view()`, il est recommandé de spécifier explicitement l'axe.

/* Définir l'axe de la chronologie de défilement */
.scroll-container {
  scroll-timeline-axis: y;
}

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

5. Plage d'Animation (Animation Range)

La propriété `animation-range` définit les décalages de défilement (points de départ et de fin) qui correspondent au début (0%) et à la fin (100%) de l'animation. Cela vous permet de mapper des positions de défilement spécifiques à la progression de l'animation.

/* Mapper toute la plage de défilement à l'animation */
.animated-element {
  animation-range: entry 0% cover 100%;
}

/* Démarrer l'animation à mi-chemin de la plage de défilement */
.animated-element {
  animation-range: 50% 100%;
}

/* Utiliser des valeurs en pixels */
.animated-element {
  animation-range: 100px 500px;
}

Exemples Pratiques et Cas d'Utilisation

Explorons quelques exemples pratiques sur la manière d'utiliser les chronologies de défilement CSS pour créer des animations captivantes :

1. Barre de Progression

Un cas d'utilisation classique pour les animations pilotées par le défilement est une barre de progression qui se remplit à mesure que l'utilisateur fait défiler la page. Cela fournit un retour visuel sur la progression de l'utilisateur dans le contenu.

/* 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>... votre contenu ici ...</p>
</div>

Ce code crée une barre de progression fixe en haut de la page. L'animation fillProgressBar augmente progressivement la largeur de la barre de progression de 0% à 100% à mesure que l'utilisateur fait défiler la page. Le animation-timeline: view() lie l'animation à la progression du défilement de la fenêtre d'affichage, et `animation-range` lie le défilement à la progression visuelle.

2. Apparition en Fondu d'Image

Vous pouvez utiliser les chronologies de défilement pour créer un effet subtil d'apparition en fondu pour les images lorsqu'elles entrent dans la fenêtre d'affichage, améliorant l'attrait visuel de votre contenu.

/* 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">

Ce code masque initialement l'image et la positionne légèrement en dessous de sa position finale. À mesure que l'image défile dans la vue, l'animation fadeIn augmente progressivement l'opacité et déplace l'image vers sa position d'origine, créant un effet d'apparition en fondu fluide. L'`animation-range` spécifie que l'animation commence lorsque le bord supérieur de l'image est à 25% dans la fenêtre d'affichage et se termine lorsque le bord inférieur est à 75% dans la fenêtre d'affichage.

3. Éléments Collants (Sticky)

Obtenez des effets « collants » (sticky) – où les éléments restent collés en haut de la fenêtre d'affichage pendant le défilement – mais avec un contrôle et des transitions améliorés. Imaginez une barre de navigation qui se transforme en douceur en une version condensée à mesure que l'utilisateur fait défiler vers le bas.

/*CSS*/
.sticky-container {
  height: 200px; /* Ajustez selon vos besoins */
  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%; /* Ajustez la plage selon les besoins */
  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; /* Changer la couleur pour indiquer l'état collant */
  }
}

/* HTML */
<div class="sticky-container">
  <div class="sticky-element">Mon Élément Collant</div>
</div>

Dans cet exemple, l'élément passe de position: absolute à position: fixed lorsqu'il entre dans les 20% supérieurs de la fenêtre d'affichage, créant un effet de « collage » fluide. Ajustez l'`animation-range` et les propriétés CSS dans les keyframes pour personnaliser le comportement.

4. Effet de Défilement Parallaxe

Créez un effet de défilement parallaxe où différentes couches de contenu se déplacent à des vitesses différentes lorsque l'utilisateur fait défiler, ajoutant de la profondeur et de l'intérêt visuel à la page.

/* CSS */
.parallax-container {
  position: relative;
  height: 500px; /* Ajustez selon vos besoins */
  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); /* Ajuster pour la vitesse de parallaxe */
 }
}

@keyframes parallaxFg {
 to {
   transform: translateY(100px); /* Ajuster pour la vitesse de parallaxe */
 }
}

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

Cet exemple crée deux couches avec des images de fond différentes. Les animations parallaxBg et parallaxFg translatent les couches à des vitesses différentes, créant l'effet de parallaxe. Ajustez les valeurs de translateY dans les keyframes pour contrôler la vitesse de chaque couche.

5. Animation de Révélation de Texte

Révélez le texte caractère par caractère à mesure que l'utilisateur défile au-delà d'un certain point, attirant l'attention et améliorant l'aspect narratif du contenu.

/* 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">Ce texte sera révélé pendant que vous défilez.</span>
</div>

Cet exemple utilise la fonction de temporisation steps(1) pour révéler le texte caractère par caractère. Le width: 0 masque initialement le texte, et l'animation textRevealAnimation augmente progressivement la largeur pour révéler tout le texte. Ajustez l'`animation-range` pour contrôler quand l'animation de révélation de texte commence et se termine.

Compatibilité des Navigateurs et Polyfills

Les chronologies de défilement CSS sont une technologie relativement nouvelle, et le support des navigateurs est encore en évolution. Fin 2023, les principaux navigateurs comme Chrome et Edge offrent un bon support. Firefox et Safari travaillent activement à l'implémentation de la fonctionnalité. Il est essentiel de vérifier la compatibilité actuelle des navigateurs avant d'implémenter les chronologies de défilement en production. Vous pouvez utiliser des ressources comme Can I use pour vérifier l'état du support.

Pour les navigateurs qui ne prennent pas en charge nativement les chronologies de défilement, vous pouvez utiliser des polyfills pour fournir une fonctionnalité similaire. Un polyfill est un morceau de code JavaScript qui implémente la fonctionnalité manquante en utilisant JavaScript. Plusieurs polyfills sont disponibles pour les chronologies de défilement CSS, vous permettant d'utiliser la fonctionnalité même dans les navigateurs plus anciens.

Considérations d'Accessibilité

Bien que les animations pilotées par le défilement puissent améliorer l'expérience utilisateur, il est crucial de prendre en compte l'accessibilité pour garantir que votre site web est utilisable par tous, y compris les utilisateurs handicapés.

Meilleures Pratiques et Astuces

Voici quelques meilleures pratiques et astuces pour utiliser efficacement les chronologies de défilement CSS :

Considérations Globales pour la Conception d'Animations

Lors de la conception d'animations pour un public mondial, gardez ces points à l'esprit :

Conclusion

Les chronologies de défilement CSS offrent un moyen puissant et efficace de créer des animations web captivantes et interactives. En liant la progression de l'animation à la position de défilement, vous pouvez créer des expériences plus dynamiques, réactives et conviviales. Bien que le support des navigateurs soit encore en évolution, les avantages de l'utilisation des chronologies de défilement CSS – performances améliorées, approche déclarative et expérience utilisateur améliorée – en font un outil précieux pour les développeurs web modernes. En expérimentant avec les chronologies de défilement, n'oubliez pas de prioriser l'accessibilité et de prendre en compte le contexte mondial de votre public pour créer des expériences web véritablement inclusives et captivantes.

Adoptez cette nouvelle technologie passionnante et débloquez un monde de possibilités créatives pour vos projets web. L'avenir de l'animation web est là, et il est piloté par le défilement !