démo de l'action

animation

Permet de créer des sections de texte sur lequel vous pourrez appliquer des effets
Comportements
La bibliothèque animation permet d'ajouter des animations sur des parties choisies (titres, images ou texte) au sein des class avec différents styles que vous pouvez découvrir sur animate.css.


Ces class peuvent s'appliquer aux éléments suivants :
  • L'action {{attach}} notamment quand elle sert à insérer une image dans votre page
  • L'action {{section}} grâce à laquelle, tout élément de votre page pourra clignoter, rebondir, s'envoler...
et autres endroits où on peut mettre des champs class...

Exemple :
  1. Ajoutez : { {section class="wow slideInRight" data="wow-iteration=3"} }, ce qui donnera le comportement du texte "exemple" quand vous êtes arrivé
  2. la partie à animer doit être fermée par { {end elem="section"} }
Explication :
  • class="wow slideInRight" => l'effet choisi fait apparaitre le texte entre { {section} } et { {end elem="section"} } par glissement depuis la droite de l'écran
  • data="wow-iteration=3" => ici, effet slideInRight répété trois fois

pour comprendre les éléments que vous pourrez activer :
  • class="wow => puis le nom de l'effet que vous trouverez sur animate.css"
vous pourrez ensuite ajouter :
  • data="
    • wow-iteration=le nb d'itération souhaitée,
    • wow-length=la durée en seconde de l'effet (ex : 2s),
    • wow-offset=délais de l'animation quand l'élément apparaît à l'écran,
    • wow-delay=délais de l'animation quand la page est chargée en seconde"
image oiseau.png (0.2MB)

documentation