Sommaire

La bibliothèque Animate On Scroll

1. Les objectifs

La bibliothèque Animate On Scroll (https://michalsnik.github.io/aos/) va permettre d’afficher des éléments HTML, des boîtes <div> contenant des images, du texte..., avec des effets d’apparition divers, lorsque ces éléments arriveront à l’écran lors de l’utilisation de la barre de défilement vertical.

images/C06-005.png

De nombreux exemples vous sont proposés sur la page d’accueil du site et ils apparaîtront en utilisant la barre de défilement vertical :

images/C06-006.png

Toute la documentation technique se trouve sur GitHub : https://github.com/michalsnik/aos

2. Installer la bibliothèque

Pour exploiter cette bibliothèque, vous devez bien sûr l’installer et l’initialiser :

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script> 
<script> 
    AOS.init(); 
</script>

Vous devez aussi utiliser ses règles CSS, accessibles depuis un CDN :

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

Voici la page complète avec les liaisons CSS et JS, sans aucune animation :

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Ma page</title> 
        <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" ...