TELECHARGEMENT utiliser la classe ANIMATE.CSS pour animer les champs

Pour introduire les effets CSS externes à webdev, nous allons expérimenter l'exploitation d'une classe CSS externe simple et efficace dénommée ANIMATE.CSS.

Vous pouvez commencer à vous familariser avec les animations proposées par cette classe sur le site de l'auteur :
Animate.css

des explications avancées (que je vous épargnerai) sur l'utilisation de la classe sont proposées sur le GITHub de la classe :
daneden/animate.css


Prérequis :
- téléchargez le fichier animate.css depuis le site de l'auteur.
- téléchargez une version récente du fichier JQuery.JS (si vous ne l'avez pas déjà mis dans votre projet) à l'adresse suivante : Download jQuery | jQuery
- placez ces deux fichiers dans le répertoire de projet (par exemple le répértoire /exe/)

Mode opératoire :

1) créer une nouvelle page Web sous webdev (peu importe le type, on restera en code navigateur)
2) allez dans les propriétés de la Page, onglet "Avancé", et assurez vous d'ajouter les références aux deux fichiers téléchargés à leurs emplacements respectifs :



à partir d'ici, notre page peut utiliser la classe Animate.css et le JQuery.

Créez une nouvelle procédure NAVIGATEUR (et éventuellement une collection de procédures dans la foulée, si webdev vous le propose), nommée JSJouerANIMATECSS().

4) Passez en code JS, en cliquant sur l'icône WL/JS en haut à gauche de la fonction


5) je vous propose d'intégrer une fonction que j'ai réalisée et qui simplifiera l'usage de cette classe au maximum. Je vous en expliquerai le détail pour les curieux du JS et du JQuery, mais ce n'est pas indispensable pour l'exploiter dans vos projets. Saissisez donc le code suivant, à la virgule et la parenthèse près, en respectant scrupuleusement la casse (majuscule/minuscule), car le JS ne pardonne pas à ce niveau :





A partir de ce point, il ne vous reste plus qu'à appeler cette méthode dans vos projets, de la manière suivante :



Attention : Fournir en paramètre l'ALIAS, et non pas le nom du champ. Car le navigateur ne connait que ça. Donc utilisez NomDuChamp..Alias


Et voila !

Pour aller plus loin je vous propose une version commentée du code de la fonction Javascript :




Note technique : dans ce code, les événements webkitAnimationEnd mozAnimationEnd MSAnimationEnd, etc ... sont les diverses noms possibles, selon les navigateurs, des événements qui se déclenchent lors de la fin de l'animation d'un champ web. La syntaxe JQuery ci-dessus nous permet de préciser, que si l'un de ces événements existe et se déclenche, il faudra alors exécuter le code qui se trouve dans function() {...}, c'est à dire, supprimer les classes "animated" ainsi que celle qui porte le nom de l'animation que vous aurez choisie. Cette suppression est nécessaire si l'on veut pouvoir rejouer l'animation une autre fois sur le même champ.

Bonus : Le code source de la fonction à COPIER/COLLER :

Code (Windev):

function JSJouerANIMATECSS(sNomAlias,sNomEffet,dureeEnSecondes,delaiEnSecondes,nbIterations)

{

           // on utilise la syntaxe JQuery pour accéder à l'élément Web correspondant à notre Alias

           // et on modifie (ou crée) la propriété css "animation-duration", pour lui affecter la valeur en secondes

           $("#"+sNomAlias).css("animation-duration",dureeEnSecondes+"s");

           // idem, on fixe le délai d'apparition de l'animation suite au déclenchement de JSJouerANIMATECSS

           $("#"+sNomAlias).css("animation-delay",delaiEnSecondes+"s");

           // et enfin le nombre de fois ou l'animation sera jouée

           $("#"+sNomAlias).css("animation-iteration-count",nbIterations);

           // on ajoute la classe "animated", puis la classe du nom de l'effet escompté à notre objet web

           // et on en profite pour indiquer qu'il faut supprimer la classe de l'objet lorsque l'animation se termine

           $("#"+sNomAlias).addClass('animated '+sNomEffet).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

           function() {

                      $("#"+sNomAlias).removeClass('animated '+sNomEffet);

           });

         

}