Maîtriser CSS @scroll-timeline : Contrôle d'Animation par la Progression du Défilement

Dans le paysage en constante évolution du développement web, la création d'expériences utilisateur engageantes et interactives est primordiale. CSS offre divers outils pour y parvenir, et l'une des plus puissantes, bien que souvent négligée, est la règle at-rule @scroll-timeline. Cette fonctionnalité permet aux développeurs de lier directement les animations à la progression du défilement d'un élément, créant ainsi des animations pilotées par le défilement captivantes. Cet article propose une exploration complète de @scroll-timeline, couvrant sa syntaxe, ses propriétés, son utilisation pratique et des techniques d'animation avancées pour améliorer vos conceptions web.

Qu'est-ce que CSS @scroll-timeline ?

@scroll-timeline est une règle at-rule CSS qui définit une chronologie de défilement, qui est essentiellement une séquence d'états correspondant à la position de défilement d'un élément spécifié. Au lieu de s'appuyer sur des animations traditionnelles basées sur le temps, @scroll-timeline lie la progression de l'animation à l'action de défilement de l'utilisateur. Cela se traduit par une animation plus naturelle et réactive, car la vitesse de l'animation est directement contrôlée par le comportement de défilement de l'utilisateur.

Cela ouvre des possibilités passionnantes pour :

• Récit visuel : Révélez le contenu progressivement à mesure que l'utilisateur fait défiler.
• Visualisation de données interactive : Animez des graphiques et des diagrammes à mesure que l'utilisateur explore les données.
• Effets de parallaxe : Créez de la profondeur et de la dimension en animant différents éléments à des vitesses variables en fonction de la position de défilement.
• Indicateurs de progression : Représentez visuellement la progression de l'utilisateur dans un long document.

Syntaxe et Propriétés

La syntaxe de base de la règle at-rule @scroll-timeline est la suivante :

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Décomposons chaque propriété :

timeline-name

Ceci est un identifiant unique pour votre chronologie de défilement. Vous utiliserez ce nom pour référencer la chronologie lors de son application à une animation.

Exemple :

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Cette propriété spécifie l'élément dont la position de défilement pilotera l'animation. Elle peut avoir deux valeurs :

• auto : Le navigateur détermine automatiquement l'élément de défilement. Il s'agit souvent de la fenêtre d'affichage du document (la fenêtre du navigateur).
• <element-selector> : Un sélecteur CSS qui identifie l'élément spécifique à utiliser comme source de défilement. Cela vous permet de cibler des conteneurs ou des sections spécifiques de votre page.

Exemple (en utilisant la fenêtre d'affichage comme source) :

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Utilise la fenêtre d'affichage */
  /* ... */
}

            

              
                Copy
              
            
          

Exemple (en utilisant un élément spécifique comme source) :

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Utilise l'élément avec l'ID "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Cette propriété spécifie la direction du défilement à utiliser pour la chronologie. Elle détermine si l'animation est pilotée par le défilement vertical ou horizontal. Elle peut avoir trois valeurs :

• auto : Le navigateur détermine automatiquement la direction du défilement en fonction de la direction de défilement dominante de l'élément source.
• block : Utilise la direction de défilement bloc (verticale, dans la plupart des modes d'écriture).
• inline : Utilise la direction de défilement en ligne (horizontale, dans la plupart des modes d'écriture).

Exemple (en utilisant le défilement vertical) :

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Défilement vertical */
  /* ... */
}

            

              
                Copy
              
            
          

Exemple (en utilisant le défilement horizontal) :

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Défilement horizontal */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Cette propriété définit les positions de défilement qui correspondent à des points spécifiques de l'animation. C'est une propriété facultative, et si elle n'est pas spécifiée, l'animation se jouera du début à la fin de la zone de défilement. Lorsqu'elle est utilisée, vous pouvez définir un ou plusieurs décalages de défilement, chacun spécifiant une position de défilement et un point correspondant dans la progression de l'animation.

La syntaxe d'un <scroll-offset> est :

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Où :

• Le premier <length-percentage> représente la position de défilement dans la zone de défilement.
• Le at <length-percentage> facultatif représente la progression de l'animation correspondante (0% à 100%). S'il est omis, la progression de l'animation est répartie uniformément entre les décalages de défilement définis.

Exemples :

            /* La position de défilement 200px correspond à une progression d'animation de 0% */
scroll-offsets: 200px at 0%;

/* La position de défilement à 50% de la zone de défilement correspond à une progression d'animation de 50% */
scroll-offsets: 50% at 50%;

/* Décalages multiples : */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Sans le mot-clé "at" - progression d'animation répartie uniformément : */
scroll-offsets: 0px, 500px, 1000px; /* Équivalent à 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Considérations importantes pour scroll-offsets :

• Si vous spécifiez scroll-offsets, assurez-vous qu'ils couvrent la plage de la zone de défilement pour éviter un comportement d'animation inattendu.
• La progression de l'animation est interpolée entre les décalages de défilement définis.
• Si vous ne spécifiez pas scroll-offsets, la progression de l'animation sera répartie uniformément sur toute la zone de défilement.

Application de la Chronologie de Défilement à une Animation

Une fois que vous avez défini votre chronologie de défilement, vous devez l'appliquer à une animation CSS à l'aide de la propriété animation-timeline.

La syntaxe est simple :

            animation-timeline: timeline-name; /* Utilisez le nom que vous avez défini dans @scroll-timeline */

            

              
                Copy
              
            
          

Vous devrez également définir une animation CSS standard à l'aide de @keyframes. L'animation définit les changements dans les propriétés CSS qui se produiront pendant que l'utilisateur fait défiler. De plus, vous voudrez vous assurer que la propriété CSS `animation-range` est définie. Elle définit la plage de la chronologie de défilement qui activera l'animation.

Voici un exemple complet :

            /* Définir la chronologie de défilement */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Définir l'animation */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Appliquer l'animation et la chronologie de défilement à un élément */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry et cover sont des valeurs clés pour les plages de début et de fin */
}

            

              
                Copy
              
            
          

Dans cet exemple :

• La @scroll-timeline nommée my-scroll-timeline est définie, utilisant la fenêtre d'affichage comme source et le défilement vertical comme orientation.
• La @keyframes nommée fade-in définit une simple animation de fondu et de montée.
• La classe .animated-element a l'animation fade-in appliquée, mais au lieu d'être déclenchée par une minuterie, elle est contrôlée par la my-scroll-timeline.
• L'animation-range définit que l'animation doit commencer lorsque le bord supérieur de l'élément entre dans les 25 % inférieurs de la fenêtre d'affichage et se terminer lorsqu'il quitte les 25 % supérieurs.

Exemples pratiques et cas d'utilisation

Explorons quelques exemples pratiques de la façon dont vous pouvez utiliser @scroll-timeline pour créer des expériences web engageantes.

1. Révéler progressivement le contenu

C'est un cas d'utilisation courant où vous révélez le contenu à mesure que l'utilisateur fait défiler la page vers le bas. Imaginez un long article avec des sections qui apparaissent progressivement à mesure qu'elles entrent dans la vue.

HTML :

            <section class="content-section">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Section 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS :

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

Dans cet exemple, chaque .content-section apparaîtra progressivement à mesure qu'il défile dans la fenêtre d'affichage. L'`animation-range` garantit que l'animation commence lorsque le bord supérieur de la section entre dans les 25 % inférieurs de la fenêtre d'affichage et se termine lorsqu'elle quitte les 25 % supérieurs.

2. Effets de parallaxe

Les effets de parallaxe créent un sentiment de profondeur en déplaçant les éléments d'arrière-plan à une vitesse différente de celle des éléments de premier plan. @scroll-timeline facilite la mise en œuvre du défilement parallaxe.

HTML :

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Section Parallaxe</h2>
    <p>Quelques contenus ici...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS :

            .parallax-container {
  position: relative;
  height: 500px; /* Ajuster au besoin */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Remplacez par votre image */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Crée l'effet de parallaxe */
  transform-origin: top;
  pointer-events: none; /* Permet de cliquer sur les éléments de premier plan */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

Dans cet exemple, le .background-element est positionné derrière le .foreground-element et mis à l'échelle à l'aide de transform. L'animation parallax-bg est ensuite appliquée, faisant bouger l'arrière-plan plus lentement que le premier plan pendant le défilement de l'utilisateur, créant ainsi l'effet de parallaxe. L'`animation-range` garantit que l'animation s'exécute sur toute la hauteur de la fenêtre d'affichage (0vh à 100vh).

3. Animation d'une barre de progression

Vous pouvez utiliser @scroll-timeline pour créer une barre de progression qui représente visuellement la progression du défilement de l'utilisateur dans un document.

HTML :

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Votre contenu ici -->
</div>

            

              
                Copy
              
            
          

CSS :

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

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

Dans cet exemple, la largeur de la .progress-bar est animée de 0 % à 100 % pendant que l'utilisateur fait défiler le document. La @scroll-timeline est nommée document-scroll-timeline, ce qui indique clairement ce qu'elle représente.

Techniques avancées

Une fois que vous maîtrisez les bases, vous pouvez explorer des techniques avancées pour créer des animations pilotées par le défilement encore plus sophistiquées.

1. Utilisation de scroll-offsets pour un contrôle précis

La propriété scroll-offsets vous permet de mapper des positions de défilement spécifiques à des valeurs de progression d'animation spécifiques. Ceci est utile lorsque vous souhaitez déclencher certains états d'animation à des points précis pendant le défilement.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

Dans cet exemple, l'animation :

• Commencera à translateX(-100px) et opacity: 0 lorsque la position de défilement est de 100px.
• Atteindra translateX(0) et opacity: 1 lorsque la position de défilement est de 500px.
• Se terminera à translateX(100px) et opacity: 0 lorsque la position de défilement est de 1000px.

2. Combinaison avec JavaScript

Bien que @scroll-timeline offre un contrôle d'animation puissant via CSS, vous pouvez le combiner avec JavaScript pour une flexibilité encore plus grande. Par exemple, vous pourriez utiliser JavaScript pour :

• Calculer et mettre à jour dynamiquement scroll-offsets en fonction de la taille de la fenêtre d'affichage ou des modifications de contenu.
• Déclencher des effets ou des interactions supplémentaires basés sur JavaScript en fonction de la progression du défilement.
• Implémenter des solutions de secours pour les navigateurs qui ne prennent pas entièrement en charge @scroll-timeline.

Voici un exemple de base d'utilisation de JavaScript pour lire la progression du défilement et mettre à jour une variable CSS :

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

Vous pouvez ensuite utiliser cette variable CSS dans votre animation :

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Valeur initiale */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Exploitation des différentes fonctions de temporisation (easing)

Bien que animation-timing-function ne soit pas directement applicable à la chronologie de défilement elle-même (car la chronologie est pilotée par la progression du défilement, pas par le temps), vous pouvez toujours utiliser des fonctions de temporisation au sein de vos @keyframes pour contrôler la vitesse et le rythme de l'animation à différentes étapes. Expérimentez avec différentes fonctions de temporisation comme ease-in, ease-out, ease-in-out, ou même des courbes de Bézier cubiques personnalisées pour obtenir l'effet souhaité.

Compatibilité du navigateur et solutions de secours

Fin 2023, @scroll-timeline bénéficie d'une prise en charge relativement bonne des navigateurs modernes comme Chrome, Edge, Firefox et Safari. Cependant, il est essentiel de vérifier le statut de compatibilité actuel sur des sites comme Can I use... avant de l'implémenter en production.

Pour les navigateurs qui ne prennent pas en charge @scroll-timeline, vous pouvez fournir une solution de secours en utilisant des écouteurs d'événements de défilement traditionnels basés sur JavaScript et des bibliothèques d'animation comme GSAP (GreenSock Animation Platform) ou Anime.js. Vous pouvez également utiliser des requêtes de fonctionnalités CSS (@supports) pour appliquer conditionnellement les animations basées sur @scroll-timeline ou les solutions de secours basées sur JavaScript.

            @supports (animation-timeline: scroll()) {
  /* Appliquer les animations basées sur @scroll-timeline */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Appliquer la solution de secours basée sur JavaScript */
  .animated-element {
    /* Masquer initialement */
    opacity: 0;
  }

  /* (Code JavaScript pour détecter le défilement et appliquer l'opacité) */
}

            

              
                Copy
              
            
          

Considérations relatives à l'accessibilité

Lorsque vous utilisez @scroll-timeline ou toute technique d'animation, il est crucial de tenir compte de l'accessibilité. Assurez-vous que vos animations ne provoquent pas :

• Des crises : Évitez les animations clignotantes ou changeant rapidement.
• De la distraction : Fournissez un moyen aux utilisateurs de mettre en pause ou de désactiver les animations, surtout si elles sont longues ou distrayantes.
• Une surcharge cognitive : Utilisez les animations avec parcimonie et assurez-vous qu'elles servent un objectif clair, plutôt que d'être purement décoratives.
• Le mal des transports : Soyez attentif aux effets de parallaxe, car ils peuvent déclencher le mal des transports chez certains utilisateurs.

Envisagez de fournir d'autres moyens d'accéder aux informations présentées par les animations, tels que du contenu statique ou du texte descriptif. Utilisez des attributs ARIA pour fournir une signification sémantique et un contexte aux technologies d'assistance.

Bonnes pratiques

Voici quelques bonnes pratiques à garder à l'esprit lorsque vous travaillez avec @scroll-timeline :

• Utilisez des noms de chronologie descriptifs : Choisissez des noms de chronologie qui indiquent clairement leur objectif (par exemple, parallax-background-timeline, reveal-section-timeline).
• Maintenez les animations performantes : Optimisez vos animations pour éviter les goulots d'étranglement de performance. Utilisez des propriétés CSS accélérées par le matériel comme transform et opacity chaque fois que possible.
• Testez minutieusement : Testez vos animations sur différents appareils et navigateurs pour vous assurer qu'elles fonctionnent comme prévu et qu'elles ne causent aucun problème d'accessibilité ou de performance.
• Commencez simplement : Commencez par des animations simples et ajoutez progressivement de la complexité à mesure que vous acquérez de l'expérience.
• Considérez l'expérience utilisateur : Assurez-vous que vos animations améliorent l'expérience utilisateur, et non qu'elles la dégradent. Évitez les animations trop complexes ou distrayantes.
• Utilisez la propriété CSS `animation-range` : Assurez-vous que les animations ne se déclenchent que lorsqu'un élément se trouve dans la fenêtre d'affichage pour une expérience fluide et prévisible.

Conclusion

@scroll-timeline est une fonctionnalité CSS puissante qui permet aux développeurs de créer des animations engageantes et interactives pilotées par le défilement. En liant les animations au comportement de défilement de l'utilisateur, vous pouvez créer des expériences web plus naturelles et réactives. En comprenant sa syntaxe, ses propriétés et ses techniques avancées, vous pouvez exploiter @scroll-timeline pour élever vos conceptions web et créer des parcours utilisateur captivants. N'oubliez pas de tenir compte de la compatibilité des navigateurs, de l'accessibilité et de la performance lors de l'implémentation de @scroll-timeline, et privilégiez toujours l'expérience utilisateur.