AOS (Animate On Scroll) est une librairie toute légère permettant d’ajouter des animations sur des éléments HTML. Ces animations se déclencheront suivant la position du scroll.
Très rapide à mettre en place et ne nécessitant aucune dépendance (pas de jQuery), AOS est un incontournable dans le domaine.
Installation
C’est là qu’AOS fait fort ! Si nous désirons utiliser les CDN, il nous suffira d’ajouter deux lignes de code pour que la librairie AOS soit opérationnelle.
On commence par ajouter un petit peu de CSS dans notre balise <head> :
…
<head>
…
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
…
</head>
…
Puis, on ajoute le javascript à la fin du <body> :
…
<body>
…
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</body>
…
Vous préférez avoir les fichiers sur votre serveur et ne pas utiliser de CDN ? Libre à vous de copier le code des fichiers CDN dans vos propres fichiers.
Vous pouvez également télécharger le package mis à disposition sur le site d’AOS. Dans ce zip, vous trouverez un dossier dist contenant le fichier CSS (aos.css) ainsi que le fichier javascript (aos.js). De plus, le package contient des exemples, un fichier renfermant les styles en format SASS, ainsi que d’autres petites joyeuseries.
Après avoir téléchargé le fichier CSS et javascript, il vous suffira, comme pour les CDN, de les charger aux bons endroits.
Maintenant que la librairie est chargée, nous allons initialiser AOS en utilisant la fonction init().
A la suite de l’appel de la librairie (aos.js), ajoutons ce petit script :
<script>
AOS.init();
</script>
Et voilà, le tour est joué :) Mais rien ne bouge… C’est normal ? Bien évidemment ! Pour animer tout ça, passons au chapitre suivant.
Les animations
Pour animer un élément HTML avec AOS, nous allons devoir lui ajouter un paramètre data-aos, dans lequel nous allons définir quelle animation jouer.
<div data-aos="fade-in">AOS permet d’ajouter 4 types d’animation, à savoir :
Fade (apparition en fondu)
En spécifiant une direction, nous pouvons choisir d’où l’élément va apparaître. Il est possible de chaîner la direction up (haut) et down (bas) avec une direction gauche/droite (left et right) pour une apparition en diagonale.
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
Flip (retournement)
En spécifiant une direction, nous pouvons choisir dans quel sens l’élément va se retourner.
- flip-up
- flip-down
- flip-left
- flip-right
Slide (glissement)
En spécifiant une direction, nous pouvons choisir de quel côté l’élément va glisser.
- slide-up
- slide-down
- slide-left
- slide-right
Zoom
En spécifiant in ou out, nous pouvons choisir si l’effet de zoom dézoome (out) ou zoom (in). Nous pouvons chaîner ce choix avec une direction pour déterminer l’orientation du zoom.
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
Les options
En ajoutant différents attributs à vos éléments HTML dotés d’une animation AOS, vous pourrez définir diverses options.
Dans la plupart des exemples ci-dessous, nous utilisons l’animation fade-in.
Affiner le déclenchement
Par défaut l’animation se lance quand le scroll atteint 120px de l’élément déclencheur. Vous pouvez choisir de déclencher l’animation plus tôt ou plus tard en jouant sur le nombre de pixels paramétré dans l’attribut data-aos-offset.
<div data-aos="fade-in" data-aos-offset= "200">
Régler la durée de l'animation
En utilisant l’attribut data-aos-duration, vous pourrez définir le temps d’animation de votre élément. Par défaut, le paramètre est réglé sur 400 (en ms). Pour des animations plus lentes, augmentez ce chiffre et pour des animations plus courtes, diminuez-le.
<div data-aos="fade-in" data-aos-duration = "400">
Gérer la synchronisation
Vous pouvez jouer avec la synchronisation de l’animation grâce à l’attribut data-aos-easing. Par défaut, l’option est paramétrée à ease.
Voici les différentes valeurs que vous pouvez utiliser :
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
Par exemple, si nous désirons que l’animation s’effectue à une synchronisation linéaire (pas d’accélération, toujours la même vitesse), nous utiliserons le code suivant :
<div data-aos="fade-in" data-aos-easing= "linear">
Déclenchement avec délai
Vous avez la possibilité d’ajouter un petit temps de délais avant le déclenchement de l’animation. Pour cela, vous devez utiliser l’attribut data-aos-delay. Le délai est défini en ms.
<div data-aos="fade-in" data-aos-delay= "200">
Position déclencheuse selon ancre
De base, les animations AOS sont déclenchées selon la position de l’élément par rapport à l’écran. Il est possible de changer cela en nous calquant sur un autre élément (qui lui doit posséder un ID (faisant office d’ancre)).
<div data-aos="fade-in" data-aos-anchor="#NomDeLAncre">En utilisant data-aos-anchor, nous avons la possibilité d’affiner le moment de déclenchement de notre animation. Par défaut, l’animation se lancera quand le scroll aura atteint le top-bottom. Pour changer cela, nous pouvons utiliser data-aos-anchor-placement.
<div data-aos="fade-in" data-aos-anchor="#NomDeLAncre" data-aos-anchor-placement="top-center">Les emplacements d’ancrages disponibles sont les suivants :
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
Animation miroir/retour
Les animations d’AOS sont lancées à chaque fois que nous atteignons un certain niveau de scroll. Si nous désirons que notre animation ne s’active qu’une seule fois, nous allons devoir utiliser le paramètre data-aos-once en lui spécifiant comme valeur true.
<div data-aos="fade-in" data-aos-once="true">
Exemple avec plusieurs attributs d'options
Les attributs s’additionnent. Voici un exemple avec les différents options vues précédemment :
<div data-aos="zoom-in-up" data-aos-delay="300" data-aos-anchor= "#NomDeLAncre" data-aos-anchor-placement="top-center" data-aos-once="true">
Options globales
Si vous en avez marre de répéter ces options dans chacun de vos éléments HTML, vous avez la possibilité de les définir en tant que options globales, directement dans la fonction d’initialisation.
Exemple :
<script>
AOS.init({
easing: 'ease-in-sine',
delay: 100,
once : 'true',
});
</script>
Comme vous pouvez le voir, il suffit de copier les différents attributs en enlevant les caractères «data-aos-». Dorénavant, tous vos éléments dotés d’une animation AOS bénéficieront des réglages spécifiés dans la fonction init().
Attention au SEO ! En effet, les robots de Google ne prennent pas forcément en compte ce qui n’est pas affiché initialement sur une page web. Il est donc déconseillé d’abuser de ce genre d’animation et de les utiliser sur vos éléments les plus importants en matière de référencement.
Sources
Catégories :
Tech webTags :
JavaScriptVous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !