-
Dans cette page
-
Plus de scripts
-
Gardons le contact
-
Souternir webbricks
ANIMER LE HTML
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.
|
|---|---|
| go([options]) | déclenche l'animation, avec les options options.
|
| 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é :
(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
-
Volkow le 20 avril 2010, à 15h17Magnifique! :)
-
webamster le 20 août 2010, à 17h11parfait c'est clair et interressant : merci !
-
webamster le 20 août 2010, à 18h23enfin 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 !!!
-
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. » -
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. -
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 ! -
Autant pour moi, il fallait ajouter les liens de tous les fichiers ".js" téléchargés, et non seulement animate.js.
-
anonyme le 12 décembre 2010, à 9h47dsl mais ca marche po cé nuuuuuuuuuuuuuuuuul
-
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. -
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à... -
En regardant le script "dragOn", j'ai vu qu'il fallait juste mettre le script à la FIN de la page...
Voilà ! -
Bacomino le 12 octobre 2011, à 11h51Bonjour 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 ? -
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 ! ;) -
Bacomino le 09 février 2012, à 16h21Merci beaucoup... J'essaye dès que je peux :)
-
Reynald le 17 février 2012, à 13h55Bonjour!
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!
