Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3897 connectés 

 


Dernière réponse
Sujet : Des petites animations qui suivent la souris sur le web !!!!
DJERO Juste un pt conseil:
 
Ce genre d'anim est très joilie mais vite gonflant...

Votre réponse
Nom d'utilisateur    Pour poster, vous devez être inscrit sur ce forum .... si ce n'est pas le cas, cliquez ici !
Le ton de votre message                        
                       
Votre réponse


[b][i][u][strike][spoiler][fixed][cpp][url][email][img][*]   
 
   [quote]
 

Options

 
Vous avez perdu votre mot de passe ?


Vue Rapide de la discussion
DJERO Juste un pt conseil:
 
Ce genre d'anim est très joilie mais vite gonflant...
asterix

deliriumtremens a écrit a écrit :

C'est du javascript en bonne et due forme.
Le script des poissons a été repris de ce site : http://www.asaisir.com/a-la-page
 
Quant à le refaire entièrement soi-même, c'est évidemment faisable (mais long pour un résultat plutôt pénible) et il y a plein de sites tutoriaux pour le js.  
 
Un site MPK avec des krapôs qui suivent la souris en perspective, gaulois ? :D




 
arf ! j'y avais pas pensé !!! :D
 
jpa > c un peu vrai ... :) mais bon ! :D
darkoli > merci ! :eek: ça dépasse un peu mes compétences techniques ... :D fô que je me remette à la programmation ... :D
 
a+

darkoli c'est assez simple à faire (en tout cas pour l'algo) :
 
voila le principe de base, il faut reussir à suivre le curseur de la souris

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <div id=objet style="position:absolute;left:0px;top:0px">O</div>
  5. <body>
  6. <script language="javascript">
  7.   function mm() {
  8.     objet.style.left=event.x;
  9.     objet.style.top=event.y;
  10.     }
  11.   document.onmousemove=mm;
  12. </script>
  13. </body>
  14. </html>


 
2° etapes ; il faut donner un mouvement à l'objet :

Code :
  1. <script language="javascript">
  2.   var p=0.1256637;
  3.   var px=0;
  4.   var py=0;
  5.   var i=0;  // position : 0..49
  6.   var r=50; // rayon du cercle
  7. // recuperation de la position de la souris
  8.   function mm() {
  9.     px=event.x;
  10.     py=event.y;
  11.     }
  12. // mouvement de l'objet
  13.   function tmr() {
  14.     objet.style.left=px+(r*Math.cos(p*i));
  15.     objet.style.top=py+(r*Math.sin(p*i));
  16.     i--;
  17.     if (i<0) i=49;
  18.     }
  19.   document.onmousemove=mm;
  20.   setInterval("tmr()",20);
  21. </script>


 
3° etapes, il faut dissocier son mouvement de celui de la souris, pour qu'il suive la souris avec un temps de retard. Pour ca il faut limiter son deplacement à chaque mise à jour :

Code :
  1. <script language="javascript">
  2.   var p=0.1256637;
  3.   var px=0;
  4.   var py=0;
  5.   var i=0;    // position : 0..49
  6.   var r=50;   // rayon du cercle
  7.   var max=5; // mouvement max de 10 pixels
  8. // recuperation de la position de la souris
  9.   function mm() {
  10.     dc=px-event.x;
  11.     if (Math.abs(dc)<max) px=event.x;
  12.       else if (dc<0) px+=max;
  13.              else px-=max;
  14.     dc=py-event.y;
  15.     if (Math.abs(dc)<max) py=event.y;
  16.       else if (dc<0) py+=max;
  17.              else py-=max;
  18.     }
  19. // mouvement de l'objet
  20.   function tmr() {
  21.     objet.style.left=px+(r*Math.cos(p*i));
  22.     objet.style.top=py+(r*Math.sin(p*i));
  23.     i--;
  24.     if (i<0) i=49;
  25.     }
  26.   document.onmousemove=mm;
  27.   setInterval("tmr()",20);
  28. </script>


 
voila, apres il ne reste plus qu'a mettre plusieurs objets.

JPA Personnellement, moi je fuis ce genre de sites qui rendent la navigation et la consultation pénibles :
Sur l'exemple fourni sur http://www.asaisir.com/a-la-page , les petits poissons gènent la consultation du code source, ce qui est un comble!
 
Essayez de rester simples sur vos sites, l'important c'est le contenu.
deliriumtremens C'est du javascript en bonne et due forme.
Le script des poissons a été repris de ce site : http://www.asaisir.com/a-la-page
 
Quant à le refaire entièrement soi-même, c'est évidemment faisable (mais long pour un résultat plutôt pénible) et il y a plein de sites tutoriaux pour le js.  
 
Un site MPK avec des krapôs qui suivent la souris en perspective, gaulois ? :D
asterix http://www.test-permis-bateau.com/
 
(je ne fais pas de pub pour ce site, il a été posté hier sur blabla. :D)
 
c'est facile à faire, ces poissons qui flottent en suivant la souris ?
est-ce du java script, java , html etc...
existe t'il des tutoriaux là dessus ?
 
a+

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)