anim-aos ~ des effets de blocs pour vos pages

Une action de Pascal Leconte sur un script de michalsnik ( licence GNU/GPLv3)

➠ anim_aos : affiche du contenu avec des animations sur scroll de page (librarie en pure JS)

Cliquer pour lire la documentation

syntaxe 1 : anime le contenu du shortcode
{up anim-aos} votre texte {/up anim-aos}
syntaxe 2 : anime les tags indiqués dans le contenu
{up anim-aos | repeat=liste tags} contenu avec les tags cibles {/up anim-aos}
syntaxe 3 : anime tous les tags indiqués à partir de la position du shortcode jusqu'à la fin de l'article
{up anim-aos | repeat=liste tags}
animation :
fade-up, fade-down, fade-right, fade-left, fade-up-right, fade-up-left, fade-down-right, fade-down-left,
flip-left, flip-right, flip-up, flip-down,
zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-right, zoom-out-left
easing :
linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine,
ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic,
ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart
anchor-placement:
top-bottom, center-bottom, bottom-bottom, top-center, bottom-center, center-center, top-top, bottom-top
author Conseilgouz version v1.2 - 11/2019 license GNU/GPLv3 credit Script de michalsnik
  • anim_aos = zoom-in-right: nom de l'animation
  • delay: delai en millisecondes (50-3000 ms)
  • duration: durée animation en millisecondes (50-3000 ms)
  • easing: effet: linear, ease-in-back, ease-out-cubic, ease-in-sine
  • offset: en px, hauteur pour déclenchement par rapport au bas de l'écran.
  • anchor-placement: déclenche l'effet lorsque le scrolling de l'élément arrive à certaines positions
  • once: one-time effect or not
  • repeat: applique l'effet à tous les tags. Ex: h2,h3
  • style: style inline appliqué au bloc
  • class: classe(s) appliquée(s) au bloc
  • css-before: style de l'élément avant l'animation
  • css-after: style de l'élément après l'animation

    Cette action permet d'animer vos page à l'aide d'effets d'apparition sur les blocs de texte ou des images

    Scroller vers le bas pour découvrir les animations

    sans argument

    Par défaut, l'animation est du type zoom-in-right avec un delai d'apparition d'une demi-seconde et une durée d'une seconde et demi

    votre texte
    {up anim-aos} votre texte {/up anim-aos}

    Les différentes animations

    Pour la démonstration et pour ne pas alourdir le code, le style des blocs est défini globalement par CSS.

    Le shortcode est de la forme :

    {up anim-aos=flip-left} flip-left {/up anim-aos}

    flip

    flip-left
    flip-right
    flip-up
    flip-down

    fade

    fade-right
    fade-left

    fade-up

    fade-up
    fade-up-right
    fade-up-left

    fade-down

    fade-down
    fade-down-right
    fade-down-left

    zoom-in

    zoom-in
    zoom-in-up
    zoom-in-down
    zoom-in-left
    zoom-in-right

    zoom-out

    zoom-out
    zoom-out-up
    zoom-out-down
    zoom-out-right
    zoom-out-left

    delay, retard à l'allumage

    delay=50
    delay=1000
    delay=3000

    duration, faire durer le plaisir

    duration=50
    duration=1000
    duration=3000

    Attention : pour delay et duration, les valeurs admises vont de 50 à 3000 par incrément de 50.

    easing

    linear
    ease-in-back
    ease-out-cubic
    ease-in-sine

    Pour easing, les valeurs permises sont : linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart

    offset

    offset=0
    offset=100
    offset=200
    offset=300

    C'est la hauteur par rapport au bas de l'écran pour déclencher l'animation.

    anchor-placement

    top-top
    bottom-top
    top-bottom
    center-bottom
    bottom-bottom
    top-center
    bottom-center
    center-center

    Anchor-placement déclenche l'effet lorsque le scrolling de la zone à afficher arrive à certaines positions : par exemple, bottom-bottom permet de déclencher l'affichage uniquement si le bas de la zone à afficher est visible. Top-bottom déclenche dès que le haut de la zone est visible et center-bottom lorsque l'on est au milieu de la zone à afficher, top-center dès que le haut de la zone est au milieu de l'écran,....

    Les valeurs permises sont : top-bottom, center-bottom, bottom-bottom, top-center, bottom-center, center-center, top-top, bottom-top

    once = juste une fois

    L'option once permet d'appliquer une seule fois l'effet à l'élément. Le bloc ci-dessous sera animé une fois au chargement de la page, et c'est tout !

    {up anim-aos=flip-left | once}

    Généraliser les réglages pour la page entière

    Il est possible d'encadrer tout ou partie du texte de votre article par un shortcode contenant l'option repeat. L'exemple ci-dessous applique le même effet à tous les titres h2 et h3

    {up anim-aos=zoom-out-down | duration=3000 | class=m0 | repeat=h3,h2} 
    <h3>1er titre</h3>
    <p>texte</p>
    <h2 class="ph1 bg-bleu t-blanc">2e titre</h2>
    <p>texte</p>
    <h3>3e titre</h3>
    <p>texte</p>
    {/up anim-aos}

    1er titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quia dolori non voluptas contraria est, sed doloris privatio. Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Duo Reges: constructio interrete. Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur.

    2e titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Duo Reges: constructio interrete. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit.

    3e titre

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur; Illis videtur, qui illud non dubitant bonum dicere -; Consequens enim est et post oritur, ut dixi. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Quae in controversiam veniunt, de iis, si placet, disseramus. Ita relinquet duas, de quibus etiam atque etiam consideret. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex. Duo Reges: constructio interrete. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia?

    Généraliser les réglages pour tous les éléments

    Il est possible de mettre un shortcode n'importe où dans votre article. Tous les éléments ciblés par repeat auront l'effet indiqué, sauf si une animation a déjà été prévue par un shortcode anim-aos ou la spécification d'une classe aos dans la balise.

    Un titre animé par un shortcode général

    {up anim-aos=red-green | repeat=h2 | duration=3000
     | css-before=background:red;transition-property:background,color
     | css-after=background:green;color:white}
    

    Vous remarquerez que l'animation est différente des autres. Cela est dû aux options css-before et css-after qui contiennent le style avant et après l'animation. Il est juste nécessaire pour l'option css-before d'indiquer la ou les propriétés utilisées pour la transition avec transition-property.

    Il est important de donner un nom unique à votre animation comme valeur de l'option principale : anim-aos=red-green