AOS.js

4 juin 2025

Antoine CALLOT

Couteau suisse IT

Introduction

Vous avez du remarquer sur mon site, j’aime faire apparaître le contenu de mes pages au “scroll”.

Comme ceci par exemple :

Bien entendu, il existe beaucoup de librairies pour faire ceci, mais je trouve que l’installation est un peu compliquée et donc je me suis dit qu’il serait bien d’avoir une librairie simple d’utilisation. C’est ainsi que j’ai découvert AOS JS qui permet de faire apparaître le contenu de mes pages au scroll.

[Lien vers la documentation] (https://michalsnik.github.io/aos/)

Installation

Pour l’installation 2 choix possibles, en utilisant votre gestionnaire de paquets favori, exemple avec npm :

npm install aos --save

Ou via les sources dans votre header ajouter les lignes suivantes :

Pour le CSS :

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Pour le JS :

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

Puis dans votre page, il suffit d’initialiser le script dans votre code javascript ajouter la ligne suivante :

  AOS.init();

Utilisation

Ensuite pour pouvoir ajouter les animations de “scroll” sur vos éléments, vous pouvez utiliser des balises dans votre code html avec la class “data-aos”, par exemple sur une balise div :

<div data-aos="fade-up"></div>

Ceci va permettre de créer l’animation “fade-up” sur votre élément.

Il existe aussi plein d’autres animations possibles :

fade-down : qui permet de faire une animation d’apparition de bas en haut
fade-left : qui permet de faire une animation d’apparition à gauche
fade-right : qui permet de faire une animation d’apparition à droite
slide-up : qui permet de faire une animation d’apparition en bas
slide-down : qui permet de faire une animation d’apparition en haut
slide-left : qui permet de faire une animation d’apparition à gauche
slide-right : qui permet de faire une animation d’apparition à droite
rotate-in : qui permet de faire une animation de rotation en haut
rotate-out : qui permet de faire une animation de rotation en bas

Vous pouvez également personnaliser les animations avec des options comme par exemple :

duration : qui permet de définir la durée de l’animation en secondes
delay : qui permet de définir le délai entre chaque animation en secondes
easing : qui permet de définir l’échelle de l’animation
offset : qui permet de définir l’offset de l’animation en pixels
mobile : qui permet de définir si l’animation est active sur mobile ou non
once : qui permet de définir si l’animation est active une seule fois ou non
disable : qui permet de définir si l’animation est désactivée ou non
start-delay : qui permet de définir le délai avant que l’animation ne commence en secondes
init-delay : qui permet de définir le délai avant que l’animation ne se lance en secondes

Par exemple dans le cadre de mes cards sur mon blog ici, je vais rajouter les class suivantes, dans ma div (un pour l’animation l’autre pour la durée.):

data-aos="fade-up"
data-aos-duration="500"

Conclusion

En conclusion la librairie “aos” est une solution très pratique pour ajouter de l’animation au scroll à vos projets web sans ce prendre la tête.

Pour plus d’informations et des exemples voir [la documentation officielle.] (https://michalsnik.github.io/aos/)