Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

 

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} *
@author: Conseilgouz @version: UP-1.6.3 @license: GNU/GPLv3 @credit: Script de michalsnik @tags: layout-dynamic
  • 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

 
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. Nullus est igitur cuiusquam dies natalis. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Quid enim est a Chrysippo praetermissum in Stoicis? Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Et ais, si una littera commota sit, fore tota ut labet disciplina. Duo Reges: constructio interrete. Atque ita re simpliciter primo collocata reliqua subtilius persequentes corporis bona facilem quandam rationem habere censebant; Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari.

2e titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod autem satis est, eo quicquid accessit, nimium est; Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum. Duo Reges: constructio interrete. Quam nemo umquam voluptatem appellavit, appellat; Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Sed quid attinet de rebus tam apertis plura requirere?

3e titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Mihi enim erit isdem istis fortasse iam utendum. Qui potest igitur habitare in beata vita summi mali metus? An potest cupiditas finiri?

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

Pour info, cette page utilise 62 action(s) :
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)