ANIMER LE HTML

illus

script : Animate
langage : javascript
catégorie : module
usage : Animez toutes les propriétés css de vos éléments html : marges, dimensions, bordures, couleurs, opacité, etc.
tags : effets spéciaux

Concept

Eh bien comme son nom l'indique, le principe de ce script est d'animer des élément HTML. On se servira pour ça des styles css, manipulés par javascript.

Démo

Premier exemple : le script permet de jouer sur les mesures d'un élément HMLT (largeur, hauteur) click me

Il permet également d'agir sur son positionnement (marges, position relative ou absolue, etc.) click me

On peut agir sur d'autres mesures encore, telles que la taille du texte, des bordures, etc. (Sur à peu près tout ce qui accepte des valeurs numériques, en fait.) click me

Avec le support de deux petits scripts complémentaire, je vous propose aussi d'agir sur la coloration. hover me

Un autre petit complément vous permettra de modifier l'opacité, même sur les navigateur qui reconnaissent uniquement des versions propriétaires de la propriété "opacity". click me

Il est en outre possible de moduler la durée de l'animation, et de lui appliquer des effets d'accélération ou ralentissement (ease-in/ease-out). click me

Autre fonctionnalité utile : le script vous permet d'appeler d'autres scripts à la fin de son éxécution. click me

Voilà (dans les grandes lignes) ce que vous propose Animate. Pour le reste, c'est surtout à votre imagination de fournir le travail !   ;-)

Intégration

Pour ce qui est de charger le script, on procède tout à fait normalement, en plaçant le code suivant entre les balises <head> et </head> de la page : 

<script src="animate.js" type="text/javascript"></script>

On rédige ensuite des programmes d'animation. (Plus d'explications plus bas.)

var elargir = new Animate( to:{width:'300px'}, duration:5000);</script>

Enfin, on déclenche les animations au moyen d'événements javascript :

<a href="#" onclick="elargir.go();return false;"></a>

Syntaxe

Pour programmer une animation, on procède en deux temps. (En fait, on peut tout faire d'un coup, mais nous verrons ça après avoir étudié la procédure complète.)

D'abord, instancier la classe Animate.

var mon_anim = new Animate();

On peut d'ailleurs, au moment de l'instanciation, définir ses réglages par défaut. On les passera en arguments, dans un tableau associatif. 

var mes_prereglages = {
    elem : document.getElementById('HTMLobj'), // l'élément HTML qui doit être animé
    to : { // style de l'élément, tel qu'il doit être à la fin de l'animation
        width : '500px',
        height : '400px'
    },
    duration : 1000 // durée de l'animation, en millisecondes
};
var mon_anim = new Animate(mes_prereglages);

Et puis dans un deuxième temps, on déclenche l'animation

var options = {
    duration : 2000 // au lieu de durer une seconde (1000ms), comme definit initialement, l'animation durera deux secondes.
}
mon_anim.go(options);

On peut ainsi déclencher l'animation aussi souvent qu'on le souhaite, en modifiant éventuellement certaines options à chaque fois.

Bonus :
Comme je le disais plus haut, il est possible de préparer et lancer une animation d'un seul coup. Il suffit pour cela, au moment où l'on instancie l'objet, de passer un deuxième argument, contenant les options à appliquer pour le premier lancement de l'animation. (S'il n'y a aucune option à passer, un simple true suffira.) 

var mon_anim = new Animate(mes_prereglages, mes_options);

Méthodes et Options

Méthodes

new Animate([options[, autoStart]]) Prépare une nouvelle animation, avec les préréglages définis dans le tableau associatif options.
object options (optionnel)
les options par défaut.
les options disponibles sont listées plus bas.
mixed autoStart (optionnel)
si autoStart est vrai, la méthode Animate.go() sera déclenchée dès l'instanciation de l'objet.
si en plus autoStart est un objet, il sera considéré comme un liste d'options pour Animate.go().
go([options]) déclenche l'animation, avec les options options.
object options (optionnel)
les options d'animation. (Les options disponibles sont listées plus bas.)
les options définies ici prévaudront sur celles déclarées (au moment de l'instanciation de l'objet) comme options par défaut.
pause() suspend l'animation. (Elle pourra être reprise par l'appel de la méthode next().)
next() lance l'étape suivante d'une animation.
Permet notamment de reprendre, là où elle en était rendue, une animation qui a été suspendue par la méthode pause().

Options

elem HTML element
l'élément à animer.
Exemple : document.getElementById('un_div')		 null
to object description javascript des styles css de l'élément animé, à l'issue de l'animation.

Toutes les propriétés ayant des valeurs numériques sont gérées. Les unités acceptées sont px, em, %, et sans unités. Les couleurs peuvent être données sous forme hexadécimale (#faff50) ou décimales (rgb(200,128,255)).
En revanche, le script ne permet pas d'animer des propriétés non numériques telles que "fontFamily" ou "overflow", ni les formes condensées telles que border:1px solid #ccc (on peut néanmoins décomposer les trois propriétés borderSize, borderStyle, et borderColor)

Exemple : { width:"300px", backgroundColor:"rgb(120,0,220)" }
{}
from object
description javascript des styles css à donner à l'élément ciblé, au début de l'animation.

Bien que cela soit recommandé, il n'est pas nécessaire de définir dans options.from une propriété pour chacune de celles définies dans options.to. Le programme tâchera de déterminer automatiquement les propriétés manquantes.

Exemple : { backgroundColor:"#faaab9" }
{}
restart boolean
dans le cas où l'animation serait lancée une nouvelle fois avant son achèvement (avec la méthode go()), restart détermine si elle devra être reprise à zéro ou non.
false
ease float
permet de donner un effet d'accélération ou de décélération à l'animation.
1 pour un animation linéaire
>1 pour une accélération progressive (ease-in)
<1 pour un ralentissement progressif (ease-out)		 1
duration integer
durée de l'animation, en millisecondes.
1000
frameRate string nombre d'étapes par secondes, dans l'animation.
30
onFinish function
fonction callback à exécuter à la fin de l'animation.
Exemple : function () { alert('fini !'); }
null

Téléchargement

Vous trouverez dans ce zip le script en version minifiée (4Ko) et en version commentée, ainsi que les quelques scripts complémentaires qui permettent de traiter les couleurs et la transparence (1Ko). 

compatibilité :
Internet Explorer (5.5+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Notez que ce module embarque plusieurs fragments de code présentés sur ce site : easeInOut, qui permet d'adoucir les animations, et transfer, toujours utile pour gérer des options.

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    Volkow  le 20 avril 2010, à 15h17
    Magnifique! :)
  • gravatar
    webamster  le 20 août 2010, à 17h11
    parfait c'est clair et interressant : merci !
  • gravatar
    webamster  le 20 août 2010, à 18h23
    enfin ce qui serait bien : mettre dans le zip de téléchargement un exemple de code ecrit parce que là ça marche pas et je ne sais pas pourquoi !!!
  • gravatar
    cloclo  le 26 septembre 2010, à 18h00
    J'essaie de modifier la propriété margin-top grâce à ce script, mais hélas ça ne marche pas et la console d'erreurs de Firefox dit :
    « Avertissement : Erreur d'analyse de la valeur pour « margin-top ». Déclaration abandonnée. »
  • gravatar
    Abrab  le 26 septembre 2010, à 20h52
    Salut Cloclo.
    Pour modifier "margin-top", il faut entrer son équivalent en javascript, à savoir "marginTop".
    De façon générale, tu enlèves le tiret, et tu mets une majuscule : backgroundColor, paddingLeft, maxWidth, etc.
  • gravatar
    Alex  le 09 octobre 2010, à 16h42
    Bonjour et félicitation pour ce script magnifique :)
    J'ai néanmoins un problème assez embêtant, j'arrive à changer toute les propriétés sans aucun problème, excepté une : backgroundColor.
    Y aurait-il une condition particulière pour cette dernière ?
    Merci pour votre aide et encore bravo !
  • gravatar
    Alex  le 09 octobre 2010, à 16h45
    Autant pour moi, il fallait ajouter les liens de tous les fichiers ".js" téléchargés, et non seulement animate.js.
  • gravatar
    anonyme  le 12 décembre 2010, à 9h47
    dsl mais ca marche po cé nuuuuuuuuuuuuuuuuul
  • gravatar
    Clément  le 24 janvier 2011, à 14h19
    Bonjour, déjà avant tout merci de mettre autant de petites astuces en ligne, néanmoins étant grand débutant, j'arrive pas a faire ce que j'ai envie !!! Je m'explique, en gros je voudrais faire quelque chose du genre Over Me, mais a la différence, ce serait une image, et quand je passe dessus soit elle se rend plus transparente soit on affiche une même image a la même place progressivement. D'avance merci pour tout autre conseil. N'hésite pas a me contacter directement par mail je t'en serais reconnaissant !

    Cordialement Clément.
  • gravatar
    zatuxa  le 02 février 2011, à 14h16
    Salut, je trouve ton script super, mais en l'essayant, ça ne marche pas !
    Je commence à en avoir assez car même en mettant toutes les options, re-vérifiant que tous les fichiers sont icnlus, RIEN ne se passe !
    J'avoue que je suis dépassé là...
  • gravatar
    zatuxa  le 05 février 2011, à 13h44
    En regardant le script "dragOn", j'ai vu qu'il fallait juste mettre le script à la FIN de la page...
    Voilà !
  • gravatar
    Bacomino  le 12 octobre 2011, à 11h51
    Bonjour tout le monde :)
    j'ai un message de la mort qui tue quand je lance ce script sous IE...

    "Détails de l?erreur de la page Web

    Agent utilisateur : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Zune 4.7)
    Horodateur : Wed, 12 Oct 2011 09:50:18 UTC

    Message : Impossible d?obtenir la valeur de la propriété « style » : objet null ou non défini
    Ligne : 255
    Caractère : 9
    Code : 0
    URI : http://##########.fr/##/#######/animate.src.js"


    Quelqu'un aurait une idée ?
  • gravatar
    anonyme  le 09 février 2012, à 16h16
    "-moz-" pour mozilla
    "-webkit-" pour Chrome

    "-ms-" pour IExplorer. T'as juste à copier-coller puis remplacer,

    ça devrait marcher ! ;)
  • gravatar
    Bacomino  le 09 février 2012, à 16h21
    Merci beaucoup... J'essaye dès que je peux :)
  • gravatar
    Reynald  le 17 février 2012, à 13h55
    Bonjour!
    D'abord merci pour ce tuto qui m?intéresse beaucoup.
    Ceci dit, serais-ce possible d'avoir en téléchargement un fichier d'exemple, avec seulement une animation, qui permettrait d'en comprendre réellement le mécanisme, car je ne parviens pas à faire mes propres intégrations, et lorsque je décortique la source de votre page, je trouve pour les exemples ce lien "<a href="#" id="tester3" class="tester">click me</a>" au lieux d'une forme de ce genre, comme vous l'indiquez: "<a href="#" onclick="elargir.go();return false;"></a>". Ne comprenant pas le ressort de cette différence, je ne parviens à comprendre les erreurs qui m?empêchent de réaliser ma propre animation.
    Merci d'avance!
  • Navré, le formulaire de commentaires est temporairement indisponible.