Présentation de la technologie de défilement

Les animations liées au défilement des pages Web existent depuis de nombreuses années. Récemment, de telles animations sont devenues plus courantes. Cela est peut-être dû au fait que les appareils utilisés pour surfer sur Internet sont devenus plus puissants. Ces appareils sont capables de gérer et d'afficher plus d'effets visuels qu'auparavant. Il existe de nombreuses technologies liées au défilement. Le but de cet article est de fournir un aperçu de ces technologies et outils qui vous aideront à choisir et à créer ce dont vous avez besoin dans chaque situation spécifique. Je diviserais les technologies de défilement en deux grandes catégories. Le premier comprend des technologies pour la mise en œuvre de mécanismes de défilement spécifiques, et le second comprend des technologies de défilement à usage général.

Technologies pour la mise en œuvre de mécanismes de défilement spécifiques

En CSS, il existe quelques effets de défilement standard simples pris en charge par les navigateurs modernes. Dans certains cas, leur application peut être suffisante pour répondre aux besoins spécifiques d'un projet.

PositionCSS propriété position: collant

Si vous devez empêcher un élément de défiler avec le reste du contenu de la page, alors lorsque vous stylisez cet élément, il suffit d'appliquer la propriété position: sticky. C'est une astuce simple et directe; son support est intégré dans les navigateurs modernes. Mais pour que cela fonctionne dans IE et dans certains navigateurs mobiles, vous aurez besoin d'un polyfill. Si vous êtes intéressé par ce sujet, jetez un œil à ce matériel.





L'élément bleu "repose" sur le dessus du conteneur et ne défile pas avec les autres éléments.



Voici une démonstration d'un tel défilement.

▍ Effet Parallax

L'effet de parallaxe n'est pas plutôt une technologie spéciale, mais une technique technique spéciale. Quoi qu'il en soit, cet effet peut être très utile dans les cas où il est nécessaire que lors du défilement, différentes parties de la page se déplacent à des vitesses différentes. Cette technique est bien décrite dans ce document. Il existe de nombreux exemples de sa mise en œuvre. Par exemple, celui-ci . Pour moi, le principal inconvénient de cette technique est qu'il est difficile de comprendre quelles valeurs qui donnent le bon effet de parallaxe doivent être utilisées pour définir les perspectives et les transformations.





Effet de parallaxe: les éléments se déplacent à des vitesses différentes.



Voici une démonstration de l'effet de parallaxe.

▍Faire défiler avec l'ancre à des points spécifiques

L'utilisation du défilement avec des points d'ancrage permet au navigateur d'ajuster automatiquement la position des éléments en les déplaçant vers une position spécifique une fois que l'utilisateur a terminé l'opération de défilement normale. Cela peut être utile dans les cas où il est nécessaire qu'après avoir terminé le défilement, un certain élément soit entièrement dans le champ de vision de l'utilisateur. Cependant, l'API est toujours instable , essayez donc d'utiliser les implémentations les plus récentes et soyez prudent lorsque vous utilisez cette approche pour le défilement en production. Voici un bon article sur le sujet.





Si l'utilisateur fait défiler l'élément et déplace l'élément au-delà de la bordure supérieure du conteneur, le navigateur modifiera automatiquement la position de l'élément afin qu'il soit visible dans son intégralité.



Voici une démonstration de l'opération de défilement avec des points d'ancrage.

▍ Défilement fluide

Le défilement fluide est pris en charge par les outils du navigateur lors du défilement d'une page vers une section spécifique à l'aide de la méthode window.scrollTo () en JavaScript, ou même à l'aide de la propriété CSS de comportement de défilement . Actuellement, des bibliothèques JavaScript spéciales sont nécessaires pour implémenter un défilement fluide avec un lissage des mouvements de la molette de la souris. Mais lorsque vous utilisez de telles bibliothèques, vous devez vous assurer de leur interaction normale avec d'autres technologies de défilement. De plus, l'utilisation d'un défilement fluide n'est pas toujours une bonne idée.

Technologies de défilement général

Actuellement, il n'y a aucun moyen, en utilisant uniquement CSS, d'exécuter des animations de défilement à usage général basées sur la position de défilement (bien qu'il y ait une suggestion selon laquelle dans un avenir lointain, nous pourrions avoir des animations basées sur des technologies de défilement à usage général) ... Par conséquent, si vous souhaitez animer des éléments pendant le défilement, vous devez au moins utiliser une certaine quantité de code JavaScript pour obtenir l'effet souhaité. Il existe deux méthodes pour utiliser JavaScript pour animer des éléments lors de leur défilement. La première consiste à utiliser l'API Intersection Observer, la seconde à gérer l'événement scroll.

▍Utilisation de l'API Intersection Observer

L'API IntersectionObserver vous permet de résoudre avec succès diverses tâches liées au défilement, si tout ce qui est nécessaire pour démarrer l'animation est de savoir si un élément est visible dans la fenêtre, ainsi que quelle partie de l'élément est visible ... Cela fait de l'API IntersectionObserver un excellent outil pour lancer des animations qui accompagnent l'apparition d'un élément à l'écran. Mais même ainsi, certains des effets sont très difficiles (bien que possibles) à implémenter en utilisant cette API. Par exemple, il s'agit du lancement de différentes animations en fonction de la direction de déplacement d'un élément. Cette API, en outre, n'est pas particulièrement utile dans les situations où lors du défilement, vous devez démarrer l'animation lorsque l'élément est quelque part au milieu de la fenêtre, c'est-à-dire qu'il n'apparaît pas dans la fenêtre et n'en disparaît pas.

▍Utilisation de l'événement de défilement

Avant quiconque utilise un événement pour implémenter une animation en défilant, de scrolltrès grandes opportunités s'ouvrent. Cette technique permet, lors du défilement, d'agir sur l'élément à n'importe quelle position de l'élément par rapport aux bordures de la zone de visualisation. En utilisant l'événement scroll, vous pouvez très précisément, en fonction des besoins du projet, définir les positions de début et de fin de l'animation.



Compte tenu de cela, il convient de noter que cette approche de l'animation de défilement peut créer une charge considérable sur le système. Cela se produit si le développeur ne se soucie pas des performances et ne limite pas la fréquence de traitement des événements scroll. De plus, à la disposition du programmeur qui décide d'utiliser l'événementscroll, il n'y aura pas d'API pratique permettant d'implémenter divers scripts de défilement. C'est pourquoi souvent, au lieu d'implémenter scrollseuls les mécanismes de traitement des événements , il est judicieux d'utiliser une bibliothèque spécialisée, dont les auteurs ont déjà pris en charge à la fois l'impact du traitement des événements scrollsur les performances et l'API. Certaines de ces bibliothèques sont même capables d'aider le développeur à résoudre des problèmes de dimensionnement des éléments.

Outils de défilement à usage général

Il existe plusieurs bibliothèques de défilement puissantes qui visent à donner au développeur un contrôle complet sur les animations effectuées lors du défilement des pages, ainsi qu'à rendre la vie aussi facile que possible pour le développeur sans le forcer à faire lui-même des calculs complexes.

▍ScrollMagic

La bibliothèque ScrollMagic nous donne une API relativement simple qui nous permet de créer divers effets lors du défilement. Cette bibliothèque peut fonctionner avec diverses bibliothèques d'animation comme GSAP et Velocity.js . Cependant, ces dernières années, cette bibliothèque n'est pas bien prise en charge. Cela a conduit à la création de la bibliothèque ScrollScene.

▍ScrollScene

ScrollScene est essentiellement un wrapper qui vise à améliorer la convivialité de la bibliothèque ScrollMagic et / ou de l'API IntersectionObserver. Il utilise sa propre version de ScrollMagic, qui a un meilleur support que la bibliothèque classique. Il existe des fonctionnalités supplémentaires ici, telles que la lecture vidéo et la prise en charge des points d'arrêt qui affectent l'animation. De plus, cette bibliothèque utilise GSAP.

▍ScrollTrigger

La bibliothèque ScrollTrigger est le plugin GreenSock officiel pour GSAP. Cette bibliothèque possède un large éventail de fonctionnalités, son API me semble la plus simple des bibliothèques existantes pour faire défiler les bibliothèques. En utilisant cette bibliothèque, vous avez un contrôle complet sur l'endroit où l'animation de défilement commence et se termine, vous pouvez animer tout ce que vous voulez pendant le défilement (WebGL, canevas, SVG, DOM), vous pouvez épingler des éléments pendant que l'animation est en cours d'exécution. Les capacités de cette bibliothèque ne sont pas limitées à cela. GreenSock prend également en charge cette bibliothèque, et vous pouvez obtenir de l'aide pour l'utiliser sur les forums GreenSock.

▍ Bibliothèque remarquable: parchemin de locomotive

La bibliothèque Locomotive Scroll ne s'efforce pas d'implémenter un ensemble de fonctionnalités aussi large que les autres bibliothèques dont nous avons parlé. Son objectif principal est de mettre en œuvre un défilement fluide. En l'utilisant, en outre, vous pouvez animer certaines propriétés des objets DOM à l'aide d'attributs data-*, ou utiliser le gestionnaire onscrollpour animer des objets d'autres types.

Comparaison des technologies et des outils

Voici une comparaison des technologies de défilement.





Voici une comparaison des bibliothèques examinées.

Résultat

Pour certains mécanismes de défilement spéciaux, tels que l'épinglage et la parallaxe, les capacités CSS standard peuvent suffire. À tout le moins, cela est vrai, à condition que vous utilisiez des polyfills pour les navigateurs qui ne prennent pas en charge les fonctionnalités CSS correspondantes.



Je recommande généralement d'utiliser la bibliothèque ScrollTrigger pour configurer le défilement. Il vous permet de réaliser tout ce dont le CSS pur est capable, ainsi que bien plus encore. Cette bibliothèque prend en charge la prise en charge du navigateur pour certaines technologies, facilite les calculs, ce qui permet à la personne qui l'utilise de vaquer à ses occupations.



Quelles technologies utilisez-vous lors de la configuration du défilement dans vos projets?