Créer des animations avec AOS

Aujourd’hui on va voir comment faire la même chose avec AOS, plus facile d’utilisation. C’est une librairie js qui permet d’appliquer tout type d’animation css au scroll, sur n’importe quel type de balise html.


L’appel des scripts

Dans le header de votre page, placez l’appel au script css.

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

Si ce n’est pas fait, incluez jquery et bien sûr n’oubliez pas ensuite d’inclure également le js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Activer le plugin

Dans la même page entre des balises script, ou dans un fichier à part, on active le plugin avec ce bout de code:

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

Si jamais ca bugue sur mobile…

AOS semble buguer sur mobile, une solution consiste donc à annuler les animations sur petit écran. Voici le code

<script>
      AOS.init({
         disable: function() {
            var maxWidth = 768;
            return window.innerWidth < maxWidth;
         }
      });
</script>

Les animations

Ensuite dans la page, vous pouvez appliquer les animations sur n’importe quel type de balise  avec l’attribut data-aos= » » :

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

Quelques options sont possibles :

<div
  data-aos="fade-up"
  data-aos-offset="200"
  data-aos-delay="50"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
  data-aos-mirror="true"
  data-aos-once="false"
  data-aos-anchor-placement="top-center">
</div>

Retrouvez la liste complète des options.

Voilà c’est à peu près tout ce qu’il faut savoir pour lancer de belles animations sur ses pages.. Attention à ne pas trop en mettre, ca complique la lecture parfois.

Partager cet article

Envoyer les données d'un formulaire avec Laravel en utilisant Ajax Précédent

Envoyer les données d'un formulaire avec Laravel en utilisant Ajax

Gérer les migrations Laravel avec une interface grahique Suivant

Gérer les migrations Laravel avec une interface grahique

Commentaires (0)

Soyez le premier à commenter cet article