Bibliothèque AOS (Animate On Scroll) : personnaliser vos animations en toute simplicité

Pas besoin d’un framework lourd pour créer un site beau et interactif. Avec un HTML propre, un CSS moderne
et un outil léger comme AOS (Animate On Scroll), vous livrez des pages rapides et engageantes
au rendu premium sans alourdir votre code. Combien de sites consultez-vous chaque jour qui semblent statiques,
plats et—soyons honnêtes—un peu ennuyeux ? Imaginez votre page d’accueil : un léger fondu, une rotation
douce ou un slide-in discret suffit à démarquer votre design. Le visiteur sent un site vivant et réactif—ce
petit détail qui arrête le défilement et capte l’attention.

Ajouter une pincée d’animation au défilement transforme la perception. Soudain, votre mise en page paraît
intentionnelle et moderne ; votre marque, plus soignée ; et votre contenu gagne en rythme et en fluidité
plutôt que de s’empiler en blocs. Le meilleur ? AOS est léger, très simple à installer, et ne demande pas de
maîtriser un gros framework JavaScript. C’est l’un de ces outils où dix minutes d’effort donnent un rendu
digne de semaines de motion design sur-mesure.

Si votre site semble encore « figé » face à la concurrence, c’est l’amélioration la plus accessible.
Intégrez AOS, testez quelques animations et voyez comme votre portfolio, blog ou boutique prend vite un
aspect premium. Relevez le défi : offrez plus que de l’information—offrez une expérience mémorable.

Add CSS to your website header

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

Add JS at the end of body tag

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>  
<script type="text/javascript">
AOS.init({   
});
</script> 

HTML

<div class="box" data-aos="my-animation-1">1</div>
<div class="box" data-aos="my-animation-2">2</div>
<div class="box" data-aos="my-animation-3">3</div>
<div class="box" data-aos="my-animation-1">4</div>
<div class="box" data-aos="my-animation-2">5</div>
<div class="box" data-aos="my-animation-3">6</div>
<div class="box" data-aos="my-animation-1">7</div>
<div class="box" data-aos="my-animation-2">8</div>
<div class="box" data-aos="my-animation-3">9</div> 

CSS

/* Default Style of Boxes */
.box {
  width: 250px;
  height: 250px;
  margin: 2rem auto; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:sans-serif;
  font-size: 5rem;
  color: #FFF;
}
 
/* Before of Animation 1 */
[data-aos="my-animation-1"] {
  transform: rotate(0deg);
  background: black;
  opacity: 0; 
}
/* After of Animation 1 */ 
[data-aos="my-animation-1"].aos-animate {
  transform: rotate(360deg); 
  opacity: 1; 
}
	
/* Before of Animation 2 */
[data-aos="my-animation-2"] {
  background: black;
  transition-property: background; 
}
/* After of Animation 2 */
[data-aos="my-animation-2"].aos-animate {
  background: cyan; 
}
	
/* Before of Animation 3 */
[data-aos="my-animation-3"] {
  transform: translateX(-100%);
  opacity: 0; 
}
/* After of Animation 3 */
[data-aos="my-animation-3"].aos-animate {
  transform: translateX(0%); 
  background: purple;
  opacity: 1; 
}

DEMO: How It Looks