démo de l'action

{{animation}}

Permet de créer des sections de texte sur lequel vous pourrez appliquer des effets
Comportements
L'action {{animation}} doit être placée en haut de page pour ajouter ensuite des animations sur des parties choisies (titres, images ou texte) avec différents styles que vous pouvez découvrir sur animate.css.


Ces class peuvent s'appliquer aux éléments suivants :
  • L'action {{backgroundimage}} qui permet de mettre des images de fond ou des aplats de couleur
  • 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 { {animation} } en haut de la page
  2. puis ajoutez : { {section class="wow slideInRight" data="wow-iteration=3"} }, ce qui donnera le comportement du texte "exemple" quand vous êtes arrivé
  3. 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)