Cool sur les animations de défilement rendues faciles avec la bibliothèque AOS

En tant que développeur frontal, une demande populaire que vous pourriez obtenir de vos clients est d'implémenter des effets d'animation étonnants sur Page Scroll. Il existe de nombreuses bibliothèques pour nous faciliter la tâche. AOS, également appelé Animate sur Scroll, est une de ces bibliothèques et il fait exactement ce que son nom suggère: il vous permet d'appliquer différents types d'animations aux éléments lorsqu'ils défilent en vue.

Ici, vous découvrirez le fonctionnement interne d'AOS, comment installer la bibliothèque et le faire fonctionner. À la fin de ce tutoriel, la construction d'animations sur Scroll pour vos clients sera un jeu d'enfant.

Les plats clés

• La bibliothèque Animated on Scroll (AOS) est un outil utile pour les développeurs frontaux pour créer des animations à décalage avec facilité, offrant une gamme de types d'animation tels que Fade, Flip et Slide.
• La bibliothèque AOS peut être installée à l'aide de Bower ou NPM et initialisée avec une seule ligne de code. Une fois initialisés, des animations peuvent être appliquées en ajoutant des attributs spécifiques aux éléments HTML.
• AOS permet aux développeurs de configurer des animations à l'aide d'attributs de données, tels que Data-AOS-offset, Data-AOS-durée et Data-AOS-seasing. Il fournit également des options pour déclencher des animations en fonction de la position des autres éléments, modifier le comportement par défaut des animations et le contrôle si les animations doivent être lues une fois ou chaque fois qu'un élément défile en vue.
• La bibliothèque AOS sépare la logique et l'animation pour un flux de travail plus propre et maintenable. Il suit les éléments et leurs positions, en ajoutant ou en supprimant dynamiquement la classe AOS-animation en fonction des paramètres fournis. La bibliothèque permet également la création d'animations personnalisées et fournit des fonctionnalités de désactivation des animations sur certains appareils ou dans des conditions spécifiques.

Comment installer la bibliothèque AOS

Vous pouvez installer AOS en utilisant Bower ou NPM.

bower:

bower <span>install aos --save</span>

npm:

<span>npm install aos --save</span>

Ensuite, liez les styles et scripts AOS:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

Si vous préférez, vous pouvez télécharger les fichiers de feuille de style AOS et JavaScript à l'aide d'un CDN comme suit:

le CSS:

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

le javascript:

<span><span><span><script</span> src<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</span>></span><span><span></script</span>></span></span>

c'est tout, il n'y a pas d'autres dépendances, ce qui aide à garder les performances de votre site Web sous contrôle.

Pour initialiser AOS, écrivez simplement la ligne ci-dessous dans votre fichier javascript.

<span>AOS.init();</span>

pour commencer avec AOS

Après avoir initialisé la bibliothèque, tout ce que vous avez à faire est d'ajouter des attributs spécifiques.

Pour utiliser des animations de base, vous avez juste besoin d'ajouter des données-aos = "animation_name" à vos éléments HTML.

Il existe plusieurs types d'animation parmi lesquels vous pouvez choisir. Par exemple, vous pouvez ajouter des animations de fondu comme «Fade», «Fade-Up» et «Fade-Down-Left». De même, vous pouvez également ajouter des animations flip et glissantes comme «flip-up», «flip-left», «diapositive» et «diapositive».

Voici le balisage de notre premier exemple:

bower <span>install aos --save</span>

Outre la ligne d'initialisation dans la section précédente, l'animation des éléments ne vous oblige pas à faire autre chose.

Jetez un œil au code ci-dessus en action:

Voir le stylo animer sur les exemples de défilement par SitePoint (@SitePoint) sur Codepen.

Configuration de vos animations avec les attributs de données AOS

Plongeons dans la liste des attributs de données que vous pouvez utiliser pour configurer vos animations.

• Data-AOS-offset - Vous pouvez utiliser cet attribut pour déclencher l'animation tôt ou tard que l'heure désignée. Sa valeur par défaut est de 120px.
• Data-AOS-durée - Vous pouvez utiliser cet attribut pour spécifier la durée de l'animation. La valeur de durée peut être entre 50 et 3000 avec des pas de 50 ms. Étant donné que la durée est gérée dans CSS, l'utilisation d'étapes plus petites ou une plage plus large aurait inutilement augmenté la taille du code CSS. Cette gamme devrait être suffisante pour presque toutes les animations. La valeur par défaut de cet attribut est 400.
• Data-AOS-seasing - Vous pouvez utiliser cet attribut pour contrôler la fonction de synchronisation pour l'animation de différents éléments. Les valeurs possibles sont les suivantes: linéaire, facilité-ou-out-out-quart. Vous pouvez voir une liste de toutes les valeurs acceptées sur le fichier ReadMe du projet sur GitHub.

Voici un exemple utilisant des données-AOS-durée et des données-aos:

Voir le stylo animer sur les exemples de défilement - Attributs par SitePoint (@SitePoint) sur Codepen.

Plus d'attributs de données que vous pouvez utiliser sont:

• Data-AOS-Anchor - Cet attribut est utile lorsque vous souhaitez déclencher l'animation en fonction de la position d'un autre élément. Il accepte tout sélecteur comme sa valeur. La valeur par défaut est nul. Cela signifie que toutes les animations seront déclenchées par rapport à la position propre de l'élément.
• DATA-AOS-ANCHOR-PLACEMENT - Par défaut, les animations sur un élément sont appliquées dès que sa partie supérieure atteint la partie inférieure de la fenêtre. Ce comportement peut être modifié à l'aide de l'attribut DATA-AOS-ANCHOR-PLACET. Comme sa valeur, cet attribut accepte deux mots séparés par un trait d'union. Par exemple, vous pouvez le régler sur le haut-fond, le centre supérieur ou le haut. Trois de ces combinaisons sont également possibles pour les valeurs centrales et inférieures.
• DATA-AOS-ONCE - Vous pouvez également contrôler si les animations ne doivent être lues que lorsque vous arrivez à un élément particulier la première fois ou chaque fois que vous faites défiler vers le haut ou vers le bas. Par défaut, les animations sont rejouées chaque fois que les éléments défilent en vue. Vous pouvez définir la valeur de cet attribut sur FALSE afin d'animer les éléments qu'une seule fois.

Vous trouverez ci-dessous un exemple de l'utilisation de Data-AOS-Anchor-Placement:

Voir le stylo animer sur les exemples de défilement - Attributs II par SitePoint (@SitePoint) sur Codepen.

Exploration du fonctionnement intérieur de la bibliothèque AOS

L'objectif de Animate sur Scroll est de gérer la logique et l'animation séparément. À cette fin, la logique est écrite à l'intérieur du javascript, mais l'animation est écrite à l'intérieur du CSS. Cette séparation nous permet d'écrire nos propres animations et de les modifier en fonction des besoins du projet dans un flux de travail très propre et maintenable.

La bibliothèque garde une trace de tous les éléments et de leurs positions. De cette façon, il peut ajouter ou supprimer dynamiquement la classe AOS-animation en fonction des paramètres que nous avons fournis. Par exemple, la classe AOS-Animate est supprimée chaque fois que les éléments auxquels il sont appliqués s'éloignent de la fenêtre. Cependant, si un élément a la valeur de Data-AOS-once définie sur true, la classe AOS-animation ne sera pas supprimée de cet élément particulier, empêchant ainsi toute animation de se produire sur des événements de défilement ultérieurs qui mettent en vue l'élément.

AOS applique également la valeur par défaut des attributs à l'élément

du document HTML. Par exemple, les données-AOS seront définies pour faciliter la facilité et les données-AOS à 400.

Comme je l'ai déjà mentionné, la bibliothèque applique la durée d'animation uniquement dans la plage de 50 à 3000 avec des étapes de 50 ms. Cela signifie que par défaut, vous ne pouvez pas avoir une durée d'animation de 225 ms. Cependant, vous pouvez ajouter cette durée vous-même en utilisant CSS comme suit:

bower <span>install aos --save</span>

Ajouter vos propres animations personnalisées à AOS est également assez simple.

Créez simplement un sélecteur d'attribut Data-AOS et définissez-le au nom de votre animation personnalisée.

Ensuite, ajoutez la propriété que vous souhaitez animer avec sa valeur initiale, ainsi que la propriété de transition définie sur le nom de la propriété que vous souhaitez animer.

Par exemple, disons que votre animation est appelée rotation-c et que l'élément vers lequel il est appliqué est initialement tourné de -180 degrés.

Voici à quoi devrait ressembler votre CSS:

bower <span>install aos --save</span>

pour définir la scène finale de votre animation (dans notre exemple, ce sera l'élément tournant de -180 degrés à 0 degrés), vous ajoutez la règle CSS suivante juste en dessous du précédent:

<span>npm install aos --save</span>

Ajoutez maintenant Data-AOS = "Rotate-C" à l'élément HTML choisi et cela tournera dans le sens des aiguilles d'une montre (de -180 degrés à 0 degrés) lorsque les utilisateurs font défiler cet élément en vue.

Voici une démo en direct montrant des animations de rotation personnalisées à la fois dans le sens des aiguilles d'une montre et dans le sens antihoraire en utilisant la méthode ci-dessus:

Voir le stylo animé sur Scroll - Animations personnalisées par SitePoint (@SitePoint) sur Codepen.

Plus de fonctionnalités

La bibliothèque AOS offre également de nombreuses autres fonctionnalités qui le rendent encore plus flexible et convivial. Au lieu de fournir des attributs pour chaque élément séparément, vous pouvez les transmettre en tant qu'objet à la fonction init (). Voici un exemple:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

Vous pouvez également désactiver les animations sur certains appareils ou dans certaines conditions à l'aide de la clé de désactivation et définir sa valeur sur un type d'appareil comme mobile, téléphone ou tablette. Alternativement, vous pouvez également désactiver la bibliothèque à l'aide d'une fonction.

Voici deux exemples pour illustrer les deux fonctionnalités:

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

Dans cet stylo, lorsque l'écran est inférieur à 800px, les animations AOS sont désactivées en utilisant la fonction ci-dessus:

Voir le stylo animer sur les exemples de défilement - Désactiver les animaux par SitePoint (@SitePoint) sur Codepen.

Outre init (), AOS fournit également deux fonctions supplémentaires: Refresh () et Refreshhard ().

refresh () est utilisé pour recalculer les décalages et positions de tous les éléments. Il est appelé automatiquement sur des événements comme le redimensionnement de la fenêtre.

Refreshhard () est appelé automatiquement chaque fois que de nouveaux éléments sont supprimés par programme ou ajoutés au DOM. De cette façon, la bibliothèque peut maintenir le réseau d'éléments AOS mis à jour. Une fois le tableau mis à jour, Refreshhard () déclenche également la fonction Refresh () pour recalculer tous les décalages.

Conclusion

Ce tutoriel vous a présenté la bibliothèque Animate on Scroll que vous pouvez utiliser pour animer des éléments lorsque vous faites défiler ou sur la page Web.

Avoir aucune dépendance et vous laisser créer vos propres animations personnalisées sont deux fonctionnalités qui font de AOS un excellent choix de bibliothèque pour le défilement des animations.

Si vous êtes intéressé par l'animation JavaScript, vous aimerez peut-être également consulter JS avec Performance: RequestanimationFrame par Tim Evko.

avez-vous jamais essayé AOS dans un projet? Comment était votre expérience? N'hésitez pas à partager quelques conseils avec les autres lecteurs.

FAQ sur les animations de défilement avec la bibliothèque AOS

Comment installer la bibliothèque AOS dans mon projet?

Pour installer la bibliothèque AOS dans votre projet, vous devez utiliser NPM (Node Package Manager). Ouvrez votre terminal et accédez à votre répertoire de projet. Ensuite, tapez la commande suivante: NPM Installer AOS - Save. Cette commande installera la bibliothèque AOS et l'enregistrera dans les dépendances de votre projet. Après l'installation, vous pouvez l'importer dans votre projet à l'aide d'importation AOS à partir de «AOS»; et l'initialiser avec aos.init ();.

Puis-je personnaliser les animations AOS?

Oui, vous pouvez personnaliser les animations AOS. La bibliothèque AOS fournit plusieurs attributs de données que vous pouvez utiliser pour personnaliser les animations. Par exemple, vous pouvez utiliser Data-AOS-durée pour définir la durée de l'animation, Data-AOS-Delay pour définir un retard avant le début de l'animation et Data-AOS pour définir la distance en haut de la page où L'animation doit démarrer.

Comment utiliser AOS avec Vue.js?

Pour utiliser AOS avec Vue.js, vous devez installer la bibliothèque AOS dans votre projet Vue.js. Après l'installation, vous pouvez l'importer dans vos composants Vue.js et l'initialiser dans le crochet de cycle de vie monté. Vous pouvez ensuite utiliser les attributs de données AOS dans votre HTML pour appliquer les animations.

Comment utiliser AOS avec react.js?

Pour utiliser AOS avec react.js, vous devez installer La bibliothèque AOS dans votre projet React.js. Après l'installation, vous pouvez l'importer dans vos composants React.js et l'initialiser dans la méthode du cycle de vie ComponentDidMount. Vous pouvez ensuite utiliser les attributs de données AOS dans votre JSX pour appliquer les animations.

Puis-je utiliser AOS avec des pseudo-éléments?

Malheureusement, AOS ne prend pas en charge les animations sur des pseudo-éléments. En effet Ayant des problèmes avec AOS, il y a plusieurs choses que vous pouvez faire. Tout d'abord, assurez-vous que vous avez correctement installé et initialisé la bibliothèque AOS. Deuxièmement, vérifiez votre HTML pour toutes les erreurs de syntaxe qui pourraient empêcher les animations de fonctionner. Troisièmement, utilisez les outils de développeur de votre navigateur pour inspecter les éléments et voir si les classes AOS sont appliquées.

Puis-je utiliser AOS sur les appareils mobiles?

Oui, AOS fonctionne sur les appareils mobiles. Cependant, gardez à l'esprit que les animations peuvent être à forte intensité de ressources et peuvent ne pas fonctionner bien sur des appareils plus anciens ou bas de gamme. Vous pouvez utiliser l'option Désactiver pour désactiver les animations sur certains appareils si nécessaire.

Comment mettre à jour la bibliothèque AOS?

Pour mettre à jour la bibliothèque AOS, vous pouvez utiliser NPM. Ouvrez votre terminal, accédez à votre répertoire de projet et saisissez la commande suivante: NPM Update AOS. Cette commande mettra à jour la bibliothèque AOS vers la dernière version.

Puis-je utiliser AOS avec d'autres bibliothèques JavaScript?

Oui, vous pouvez utiliser AOS avec d'autres bibliothèques JavaScript. Cependant, assurez-vous que les autres bibliothèques n'interfèrent pas avec les animations AOS. Si vous rencontrez des problèmes, essayez de désactiver les autres bibliothèques pour voir s'ils causent le problème.

Comment désinstaller la bibliothèque AOS?

Pour désinstaller la bibliothèque AOS, vous pouvez Utilisez NPM. Ouvrez votre terminal, accédez à votre répertoire de projet et saisissez la commande suivante: NPM Désinstaller AOS. Cette commande supprimera la bibliothèque AOS de votre projet.

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!