Animer avec Javascript comme l'ActionScript
kabbabi
Messages postés
222
Statut
Membre
-
dariumis Messages postés 583 Statut Membre -
dariumis Messages postés 583 Statut Membre -
Bonjour,
En ActionScript, on peut faire bouger un objet grâce au défilement des frames :
onEnterFrame = function(){
objet._x+=1;
}
Dans ce code, un objet se déplace de gauche à droite progressivement.
Existe-il en JavaScript des codes permettant de faire la même chose ?
Merci
En ActionScript, on peut faire bouger un objet grâce au défilement des frames :
onEnterFrame = function(){
objet._x+=1;
}
Dans ce code, un objet se déplace de gauche à droite progressivement.
Existe-il en JavaScript des codes permettant de faire la même chose ?
Merci
A voir également:
- Animer avec Javascript comme l'ActionScript
- Telecharger javascript - Télécharger - Langages
- Voici une présentation avec des animations. quand on lance le diaporama, quels fruits descendent du haut de l’écran ? ✓ - Forum LibreOffice / OpenOffice
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- Javascript arrondi - Forum Javascript
2 réponses
Salut, j'avais fais ce code pour une amie, tu peux voir le résultat ici:
http://dariumis.webhop.biz/test/LDP/diapo.php
http://dariumis.webhop.biz/test/LDP/diapo.php
<script>
var i=-50;
var bool=true;
function incremente(id){
if(bool==true){
i=i+1;
document.getElementById(id).style.display='block';
document.getElementById(id).style.left=i+'%';
if(i<25){
setTimeout("incremente()",0);
}else{
bool=false;
}
}
}
</script>
ok.
Le javascript:
l'html:
le css:
EDIT: Rectification de l'erreur cité ci-dessous.
Le javascript:
<script>
/*initialisation de "i" qui représente
la position de départ de l'objet ici -50%*/
var i=-50;
/*initialisation d'un boolean pour dire quant l'objet
est arrivé a sa position final sinon en recliquant sur le
lien il continurait a avancer*/
var bool=true;
/*la fonction icremente qui s'appel elle même (récursivité).
Elle prend l'id de l'objet a déplacer en parametre*/
function incremente(id){
//si le boolean est vrai
if(bool==true){
/*on incrémente la position, si tu met "i=i+2" les pas
seront deux fois plus grand*/
i=i+1;
/*au depart l'objet a un css "display:none"
on le met visible*/
document.getElementById(id).style.display='block';
//on applique la nouvelle position
document.getElementById(id).style.left=i+'%';
//si la position est inferieur a 25%
if(i<25){
/*on éxecute de nouveau la fonction dans un timer,
tu peux modifier la vitesse avec le deuxieme parametre
de la fonction "setTimeout" voir la
doc pour en savoir plus*/
setTimeout("incremente(id)",0);
/*sinon il est arrivé a sa position final on initialise
le boolean a false*/
}else{
bool=false;
}
}
}
</script>
l'html:
<!-- a partir du body -->
<body>
<!-- si le javascript du client est désactivé -->
<noscript>Vous devez activer votre javascript</noscript>
<div id="global">
<!-- élément a cliquer pour lancer le javascript sur "onclik()"
il prend l'id de l'objet a déplacer
-->
<div title="lancer le code javascript" style="cursor:pointer;" onclick="incremente('diap3')" id="menu">
menu1
</div>
</div>
<!-- l'objet animé ici un div -->
<div id="diap3">
diaporama 1
</div>
</body>
le css:
/*css appliqué au depart sur l'objet qui se déplace*/
#diap3{
/*en position absolute pour etre indépendant des autres éléments*/
position:absolute;
/*pour le style*/
border:ridge;
/*longueur, c'est pour ça que la codition du javascript ce termine a 25%
pour que l'objet soit bien centré*/
width:50%;
/*au départ on ne l'affiche pas, on l'affiche que lors du clique sur menu1*/
display:none;
}
EDIT: Rectification de l'erreur cité ci-dessous.
Mais aurais-tu un tutoriel COMPLEt s'il te plaît qui est spécialisé comme ça ?
(Fondus, vitesse de déplacement, éclaircissement progressif d'un objet ...)
Apres je pense que sur la base du code plus haut doit y avoir moyen de l'adapter pour d'autres choses.