Animer avec Javascript comme l'ActionScript

Fermé

kabbabi Messages postés 186 Date d'inscription lundi 3 mai 2010 Statut Membre Dernière intervention 28 avril 2011 - Modifié par irongege le 30/06/2010 à 10:05
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 - 1 juil. 2010 à 15:42

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

A voir également:

Animer avec Javascript comme l'ActionScript
Telecharger javascript - Télécharger - Langages
Node.js javascript runtime virus ✓ - Forum Virus
Voici une présentation avec des animations. quand on lance le diaporama, quels fruits descendent du haut de l’écran ? ✓ - Forum LibreOffice / OpenOffice
Javascript echo ✓ - Forum PHP
Erreur #125 javascript - Forum Mozilla Firefox

2 réponses

Réponse 1 / 2

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 30/06/2010 à 10:42

Salut, j'avais fais ce code pour une amie, tu peux voir le résultat ici:
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>

kabbabi Messages postés 186 Date d'inscription lundi 3 mai 2010 Statut Membre Dernière intervention 28 avril 2011 6
30 juin 2010 à 15:31

Merci, c'est exactement ça que je veux : Jouer avec les éléments d'une page.
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 ...)

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
30 juin 2010 à 18:18

ha non désolé, je n'ai pas connaissance d'un tel tuto, mais ça doit exister. J'y connais rien et je dis peut etre une bétise, mais peut etre chercher du côté de "jquery" j'ai entendu dire que ça faisait des trucs comme ça, mais comme j'ai dis je connais pas jquery.
Apres je pense que sur la base du code plus haut doit y avoir moyen de l'adapter pour d'autres choses.

kabbabi Messages postés 186 Date d'inscription lundi 3 mai 2010 Statut Membre Dernière intervention 28 avril 2011 6
1 juil. 2010 à 09:54

OK mais tu pourrais pas m'expliquer ton code et je me débrouille après ?

Réponse 2 / 2

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 1/07/2010 à 18:36

ok.
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.

kabbabi Messages postés 186 Date d'inscription lundi 3 mai 2010 Statut Membre Dernière intervention 28 avril 2011 6
1 juil. 2010 à 14:24

Ça a pas marché :S

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
1 juil. 2010 à 15:38

j'ai fait une erreur sur cette ligne désolé:

setTimeout("incremente('diap3')",0);

faut faire rentrer l'id en parametre dans javascript.

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
1 juil. 2010 à 15:42

ou plutot comme ça:

setTimeout("incremente(id)",0);

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

javascript:void(0);

java activée mais ne fonctionne pas !

Problème d'animation dans une présentation avec PowerPoint2016