Des petites animations qui suivent la souris sur le web !!!!

Des petites animations qui suivent la souris sur le web !!!! - Programmation

Marsh Posté le 14-06-2001 à 07:37:52    

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+


---------------
Je vous le dis : il faut porter du chaos en soi pour pouvoir donner naissance à une étoile dansante. Frédéric Nietzsche
Reply

Marsh Posté le 14-06-2001 à 07:37:52   

Reply

Marsh Posté le 14-06-2001 à 09:09:10    

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

Reply

Marsh Posté le 14-06-2001 à 09:16:36    

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.

Reply

Marsh Posté le 14-06-2001 à 10:16:56    

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.

Reply

Marsh Posté le 14-06-2001 à 10:54:44    

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+


---------------
Je vous le dis : il faut porter du chaos en soi pour pouvoir donner naissance à une étoile dansante. Frédéric Nietzsche
Reply

Marsh Posté le 15-06-2001 à 09:23:27    

Juste un pt conseil:
 
Ce genre d'anim est très joilie mais vite gonflant...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed