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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Des petites animations qui suivent la souris sur le web !!!!

asterix

Teigneux inside ! ©

http://www.test-permis-bateau.com/

(je ne fais pas de pub pour ce site, il a été posté hier sur blabla. )

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

Publicité

deliriumtremens

sic transit intestinal...

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 ?

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.

darkoli

Le Petit Dinosaure Bleu

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 :

<html>
<head>
</head>
<div id=objet style="position:absolute;left:0px;top:0px">O</div>
<body>
<script language="javascript">
function mm() {
objet.style.left=event.x;
objet.style.top=event.y;
}
document.onmousemove=mm;
</script>
</body>
</html>

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

Code :

<script language="javascript">
var p=0.1256637;
var px=0;
var py=0;
var i=0; // position : 0..49
var r=50; // rayon du cercle
// recuperation de la position de la souris
function mm() {
px=event.x;
py=event.y;
}
// mouvement de l'objet
function tmr() {
objet.style.left=px+(r*Math.cos(p*i));
objet.style.top=py+(r*Math.sin(p*i));
i--;
if (i<0) i=49;
}
document.onmousemove=mm;
setInterval("tmr()",20);
</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 :

<script language="javascript">
var p=0.1256637;
var px=0;
var py=0;
var i=0; // position : 0..49
var r=50; // rayon du cercle
var max=5; // mouvement max de 10 pixels
// recuperation de la position de la souris
function mm() {
dc=px-event.x;
if (Math.abs(dc)<max) px=event.x;
else if (dc<0) px+=max;
else px-=max;
dc=py-event.y;
if (Math.abs(dc)<max) py=event.y;
else if (dc<0) py+=max;
else py-=max;
}
// mouvement de l'objet
function tmr() {
objet.style.left=px+(r*Math.cos(p*i));
objet.style.top=py+(r*Math.sin(p*i));
i--;
if (i<0) i=49;
}
document.onmousemove=mm;
setInterval("tmr()",20);
</script>

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

asterix

Teigneux inside ! ©

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 ?

arf ! j'y avais pas pensé !!!

jpa > c un peu vrai ... mais bon !
darkoli > merci ! :eek: ça dépasse un peu mes compétences techniques ... fô que je me remette à la programmation ...

a+

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

DJERO

Yoooup...merde ça marche pas..

Juste un pt conseil:

Ce genre d'anim est très joilie mais vite gonflant...

FORUM HardWare.fr

Programmation

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

Sujets relatifs
[DELPHI] PB pour CLIC DROITet CLIC GAUCHEde la souris sur PANEL	[VB6] comment séléctionner un nom avec la souris dans une listbox ?
[JAVA] Jbuilder 3 - 2 petites questions !	[OpenGL] gestion clavier/souris
[C] prob de souris qui efface(avec interup...)	Deplacer la souris avec VB ?
Manipuler la souris sous windows ?	Position de la souris en C
Connaitre position souris [VB]	[VB] pointeur souris et interpolation
Plus de sujets relatifs à : Des petites animations qui suivent la souris sur le web !!!!

Page générée en 0.036 secondes