Une action de Pascal Leconte sur un script de michalsnik ( licence GNU/GPLv3)
{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}
*- anim_aos = zoom-in-right: nom de l'animation
- delay: délai 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
- css-before: style de l'élément avant l'animation
- css-after: style de l'élément après l'animation
- id: identifiant
- style: style inline appliqué au bloc
- class: classe(s) appliquée(s) au bloc
- Version 1.7
- ajout option once
Cette action permet d'animer vos page à l'aide d'effets d'apparition sur les blocs de texte ou des images
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
{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
fade
fade-up
fade-down
zoom-in
zoom-out
delay, retard à l'allumage
duration, faire durer le plaisir
Attention : pour delay et duration, les valeurs admises vont de 50 à 3000 par incrément de 50.
easing
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
C'est la hauteur par rapport au bas de l'écran pour déclencher l'animation.
anchor-placement
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. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Nam, ut sint illa vendibiliora, haec uberiora certe sunt. Cum praesertim illa perdiscere ludus esset. Aut, Pylades cum sis, dices te esse Orestem, ut moriare pro amico? Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Duo Reges: constructio interrete. Uterque enim summo bono fruitur, id est voluptate.
2e titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Honesta oratio, Socratica, Platonis etiam. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Duo Reges: constructio interrete. Non autem hoc: igitur ne illud quidem.
3e titre
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum ením bonum exposuit vacuitatem doloris; An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Sic igitur in homine perfectio ista in eo potissimum, quod est optimum, id est in virtute, laudatur. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Quid dubitas igitur mutare principia naturae? Quod ea non occurrentia fingunt, vincunt Aristonem; Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? Duo Reges: constructio interrete.
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
upactionslist (1) readmore (1) csv2def (1) tabslide (1) toc (1) addcsshead (1) anim-aos (49) center (1) lorem_flickr (1) icon (1) lorem (3) jcontent-info (1)