Ajoutez une animation à votre page web

0/5 (2 avis)

Vue 20 654 fois - Téléchargée 2 017 fois

Description

ce code présente des yeux qui suivent le pointeur souris, c'est très banal...

Source / Exemple :


//Following Eyes - http://www.btinternet.com/~kurt.grigg/javascript

/*
Paste this js-link between the <body> </body> tags of your page HTML.

<script type="text/javascript" src="followingeyes.js"></script>

Make sure that followingeyes.js, pupils.gif and eye.gif are in/uploaded 
to the same directory/folder as the web page using the script.

  • /
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Following Eyes</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- body{ background:#ffffff; } //--> </style> </head> <body> <script type="text/javascript"> //Following Eyes - http://www.btinternet.com/~kurt.grigg/javascript if ((document.getElementById) && window.addEventListener || window.attachEvent){ (function(){ var e_img = new Image(); e_img.src = "eye.gif"; var p_img = new Image(); p_img.src = "pupils.gif"; var idx = document.images.length; if ( document.getElementById("pic"+idx) || document.getElementById("ppl1"+idx) || document.getElementById("ppl2"+idx)) idx++; document.write('<img id="eyblls'+idx+'" src="'+e_img.src+'" alt="" style="position:absolute;top:0px;left:0px;width:69px;height:34px"/>' +'<img id="ppl1'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>' +'<img id="ppl2'+idx+'" src="'+p_img.src+'" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'); var h,w,r,eyeballs,pupil1,pupil2; var d = document; var my = 0; var mx = 0; var fy = 0; var fx = 0; var pix = "px"; var domWw = (typeof window.innerWidth == "number"); var domSy = (typeof window.pageYOffset == "number"); if (domWw) r = window; else{ if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) r = d.documentElement; else{ if (d.body && typeof d.body.clientWidth == "number") r = d.body; } } function winsize(){ var oh,sy,ow,sx,rh,rw; if (domWw){ if (d.documentElement && d.defaultView && typeof d.defaultView.scrollMaxY == "number"){ oh = d.documentElement.offsetHeight; sy = d.defaultView.scrollMaxY; ow = d.documentElement.offsetWidth; sx = d.defaultView.scrollMaxX; rh = oh-sy; rw = ow-sx; } else{ rh = r.innerHeight; rw = r.innerWidth; } h = rh; w = rw; } else{ h = r.clientHeight; w = r.clientWidth; } } function scrl(yx){ var y,x; if (domSy){ y = r.pageYOffset; x = r.pageXOffset; } else{ y = r.scrollTop; x = r.scrollLeft; } return (yx == 0)?y:x; } function mouse(e){ var msy = (domSy)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ my = e.pageY - msy; mx = e.pageX; } else{ my = e.clientY - msy; mx = e.clientX; } } function makefollow(){ var sy = scrl(0); var sx = scrl(1); //Keep eyes on screen. var chy = Math.floor(fy-50); if (chy <= 0) chy = 0; if (chy >= h-50) chy = h-50; var chx=Math.floor(fx-34); if (chx <= 0) chx = 0; if (chx >= w-69) chx = w-69; //eyeball1 centre. var c1y = chy+17; var c1x = chx+17; //eyeball2 centre. var c2y = chy+17; var c2x = chx+52; var dy1 = my - c1y; var dx1 = mx - c1x;//80 var d1 = Math.sqrt(dy1*dy1 + dx1*dx1); var dy2 = my - c2y; var dx2 = mx - c2x; var d2 = Math.sqrt(dy2*dy2 + dx2*dx2); var ay1 = my - c1y; var ax1 = mx - c1x; var angle1 = Math.atan2(ay1,ax1)*180/Math.PI; var ay2 = my - c2y; var ax2 = mx - c2x; var angle2 = Math.atan2(ay2,ax2)*180/Math.PI; var dv = 1.7; var onEyeBall1 = (d1 < 17)?d1/dv:10; var onEyeBall2 = (d2 < 17)?d2/dv:10; eyeballs.top = chy+sy+pix; eyeballs.left = chx+sx+pix; pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)+sy+pix; pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)+sx+pix; pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)+sy+pix; pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)+sx+pix; } function move(){ dy = fy += (my-fy) * 0.05; dx = fx += (mx-fx) * 0.05; makefollow(); setTimeout(move,30); } function init(){ eyeballs = document.getElementById("eyblls"+idx).style; pupil1 = document.getElementById("ppl1"+idx).style; pupil2 = document.getElementById("ppl2"+idx).style; winsize(); move(); } if (window.addEventListener){ window.addEventListener("resize",winsize,false); window.addEventListener("load",init,false); document.addEventListener("mousemove",mouse,false); } else if (window.attachEvent){ window.attachEvent("onresize",winsize); window.attachEvent("onload",init); document.attachEvent("onmousemove",mouse); } })(); }//End. </script> </body> </html>

Codes Sources

A voir également

Ajouter un commentaire Commentaires
kankrelune Messages postés 1293 Date d'inscription mardi 9 novembre 2004 Statut Membre Dernière intervention 21 mai 2015
23 avril 2007 à 01:13
Oui sauf qu'à première vue cette source n'est pas de Zaydan... sans parler du respect de la propriété intellectuelle du code quel intérêt de poster les sources des autres si ce n'est de profiter du programme code sources/google adsense... après si ce code est vraiment de toi zaydan je retire ce que j'ai dis mais dans le cas contraire c'est du foutage de gueule... .. .

@ tchaOo°
econs Messages postés 4030 Date d'inscription mardi 13 mai 2003 Statut Modérateur Dernière intervention 23 décembre 2008 23
20 avril 2007 à 18:20
Salut,

L'effet est vraiment sympa sous IE ... Sous Firefox, c'est un peu ... comment dire ... inopérant. :o)
Penses à mettre les commentaires en français. C'est dommage pour un site francophone !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_zaydan)