Un aperçu des technologies de défilement

La technologie d'animation de défilement Web existe depuis de nombreuses années et est de plus en plus largement utilisée ces dernières années. Cela peut être en partie attribué à l'amélioration des performances de l'appareil et à la capacité de mieux gérer les effets d'animation.

Cet article vise à décrire diverses technologies liées au défilement et à fournir des guides de sélection d'outils pour vous aider à trouver la bonne solution. Ces technologies peuvent être à peu près divisées en deux catégories: les techniques de comportements et de techniques spécifiques de défilement pour des comportements de défilement plus généraux .

Techniques de comportements de défilement spécifiques

Les navigateurs modernes prennent en charge certains effets de défilement CSS natifs simples, ce qui, dans certains cas d'utilisation limités, est suffisant pour répondre à vos besoins d'animation de défilement.

position: sticky

Si vous avez juste besoin d'un élément sur la page pour rester dans la même position pendant le défilement, utiliser position: sticky est un bon choix. Il est simple et simple et intégré dans un navigateur moderne. Cependant, IE Browser et certains navigateurs mobiles nécessitent une prise en charge de Polyfill.

Parallaxe CSS

Ce n'est pas tant une technique qu'une astuce, mais très pratique pour les effets de parallaxe simples, vous pouvez avoir différentes parties du défilement de la page à différentes vitesses. Le plus gros inconvénient est qu'il est difficile de comprendre les valeurs à utiliser pour définir la perspective et la transformation pour obtenir des effets de parallaxe précis.

Point de capture de défilement CSS

Le point de capture de défilement permet au navigateur de capturer la position de défilement spécifique que vous définissez une fois que l'utilisateur a terminé de défiler normalement. Cela aide à garder certains éléments visibles. Cependant, l'API change toujours, alors assurez-vous d'utiliser la dernière API et veillez à ne pas compter sur elle en production.

Défilement lisse

Utilisation de window.scrollTo() Dans JavaScript ou scroll-behavior Attribut dans CSS, le défilement lisse est pris en charge nativement lors du saut vers diverses parties de la page. Actuellement, tous les navigateurs ne prennent pas en charge le fait de faire un défilement lisse universel avec un fonctionnement lisse de la roue de la souris. Diverses bibliothèques JavaScript tentent d'ajouter une prise en charge de défilement en douceur pour les opérations de roues de souris, mais je n'ai pas trouvé de bibliothèque qui est complètement sans bug et fonctionne bien avec toutes les autres techniques de défilement. De plus, le défilement lisse lui-même n'est pas toujours un bon choix.

Techniques de comportement de défilement universel

Actuellement, il est impossible de créer ou de déclencher une animation universelle basée sur la position de défilement en utilisant uniquement CSS (bien qu'il existe une proposition qui pourrait soutenir une certaine forme d'animation universelle universelle de défilement CSS dans un avenir lointain), ni d'effacer une partie de l'animation. Donc, si vous souhaitez animer les éléments pendant le défilement, vous devez utiliser au moins un JavaScript pour créer l'effet souhaité. Il existe deux façons principales de déclencher des animations lors du défilement à l'aide de JavaScript: l'utilisation de la vision transversale et l'utilisation d'événements de défilement .

IntersectionObserver

Les inter-opérateurs sont utiles si vous n'avez besoin que d'informations sur la visible de l'élément dans la fenêtre et la façon dont elle est visible. Cela en fait un bon choix pour révéler les animations. Néanmoins, il y a des difficultés (mais pas impossibles) en utilisant une vision transversale, comme déclencher différentes animations en fonction de la direction dans laquelle l'élément entre dans la fenêtre. La vision transversale n'est pas très utile non plus si vous voulez faire une animation de défilement lorsqu'un élément est entre les points de début et de fin et ne le chevauche pas.

Utilisez des événements de défilement

L'utilisation d'événements de défilement vous donnera la plus grande liberté pour contrôler les animations de défilement. Il vous permet d'influencer les éléments lors du défilement quelle que soit la position de l'élément dans la fenêtre, et de définir les points de début et de fin précisément selon les besoins de votre projet.

Cela étant dit, si cela ne limite pas correctement et qu'il n'y a pas d'API pratique pour créer un comportement spécifique, il peut également avoir un impact important sur les performances. C'est pourquoi il est souvent utile d'utiliser une bonne bibliothèque de défilement pour vous aider à gérer la limitation et à fournir une API plus pratique à utiliser. Certaines bibliothèques peuvent même gérer de nombreux problèmes de redimensionnement pour vous!

Outils pour créer des comportements de défilement universel

Il existe des bibliothèques de défilement globales qui essaient de vous donner un contrôle total sur l'animation de défilement sans avoir à effectuer tous les calculs vous-même.

Scrollmagic

ScrollMagic fournit une API relativement simple pour créer divers effets de défilement et peut être lié à différentes bibliothèques d'animation telles que GSAP et Velocity.js. Cependant, cela a été de moins en moins maintenance au cours des dernières années, ce qui a conduit à la création de ScrollScene.

ScrollScene

ScrollScene est essentiellement un wrapper qui essaie de rendre plus facile à utiliser ScrollMagic et / ou Cross-Viewers. Il utilise une version personnalisée et maintenue de ScrollMagic et ajoute des fonctionnalités supplémentaires telles que la lecture vidéo, les points d'arrêt de l'initialisation de la scène et les points d'arrêt de la durée de la scène. Il utilise également GSAP.

Scrolltrigger

Scrolltrigger est le plugin Greensock officiel pour GSAP. Il a une longue liste de fonctionnalités et a l'API la plus facile à utiliser dans n'importe quelle bibliothèque de défilement (du moins pour moi). Avec lui, vous avez un contrôle total sur la définition des positions de début et de fin des animations de défilement, d'animer n'importe quoi (webgl, canevas, svg, dom, etc.) tout en faisant défiler, des éléments d'épingle en place lorsque l'animation est en cours d'exécution, et plus encore. Vous pouvez même le connecter à une bibliothèque de défilement lisse et ils fonctionneront parfaitement ensemble. De plus, il est soutenu par les forums Greensock et Greensock.

Mention de la peine de mention: Locomotive Scroll

Bien qu'il n'essaie pas d'être une bibliothèque de défilement complète comme les autres bibliothèques mentionnées ci-dessus, le Scroll Locomotive se concentre sur la fourniture de défilement en douceur personnalisé. Vous pouvez également animer certaines propriétés de l'objet DOM en ajoutant des attributs de données ou en vous connectant à onscroll pour animer d'autres types d'objets.

Résumer

Pour certains effets d'animation de défilement spécifiques, tels que le positionnement collant et la parallaxe, la technologie CSS peut être suffisante, au moins lors de l'utilisation de polyfill pour prendre en charge les navigateurs qui ne prennent pas en charge ces propriétés.

Je recommande généralement d'utiliser Scrolltrigger de GSAP car il peut faire tout ce que la propriété CSS peut faire, et plus encore. ScrollTrigger gérera la prise en charge et les calculs du navigateur afin que vous puissiez vous concentrer sur l'animation!

Le tableau suivant répertorie les outils que vous pouvez utiliser pour créer des effets spécifiques:

(Le tableau doit être inséré ici pour comparer différents aspects de diverses technologies de défilement, telles que les performances, la facilité d'utilisation, les fonctionnalités, etc.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!