CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 09 20:12:21

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs Amusants

> AJOUTEZ UNE ANIMATION À VOTRE PAGE WEB

AJOUTEZ UNE ANIMATION À VOTRE PAGE WEB

Information sur la source

Note :
Aucune note

Catégorie :Trucs Amusants Classé sous :animation, yeux, effetyeux, javascript Niveau :Débutant Date de création :20/04/2007 Vu / téléchargé :17 722 / 1 674

Auteur : zaydan

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

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

Source

//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>

//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>

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

example.html 532 octets
eye.gif 584 octets
followingeyes.js 4 079 octets
instructions.txt 312 octets
pupils.gif 130 octets

Télécharger le zip

Sources de la même categorie

IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol

IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol

IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol

IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol

IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol

Toutes les sources de la catégorie Trucs Amusants

Sources en rapport avec celle ci

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

ROTATION D'UNE IMAGE, ANIMATION par william voirol

SCROLLER HORIZONTAL ++ EN JAVASCRIPT par miika

ANIMATION DE TEXTES par abdelaziz_info

ANIMATION EN JAVA SCRIPT par abdelaziz_info

Commentaires et avis

Commentaire de econs le 20/04/2007 18:20:37 administrateur CS

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 !

Commentaire de kankrelune le 23/04/2007 01:13:43

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°

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

appeller une script [ par poitierjohan ] Bonjour,Est-il possible d'appeller un script (écrit en JavaScript) qui est en dehors de ma page hmtl??Autrement dis, que ma page web dans la Eliminer Un DIV ??? [ par jzeel ] Bonjour à tous,J'ai une animation flash qui se trouve dans un div, mais dès que l'animation se termine je vais appler un javascript à partir du flash SOS cherche galerie javascript pour mon futur site personnel [ par alfatango1 ] Bonjour à tous, Je suis nouveau sur le forum. Permettez-moi de saluer l'ensemble de la communauté du forum. Je cherche depuis plusieurs jours un sit Javascript et animation flash !? [ par cewac ] Bonjour à tous, Pour commencer je dois vous dire que je suis novice en javascript et donc soyez indulgeant face à mon ignorance. Voici mon&n javascript et formulaire [ par CHABRY ] Bonjour, je me demande comment puis-je déterminer un par un les noms de chapms de saisie d'un formulaire car je pense construire un fichier .js qui s Précharger animation & images [ par onesky ] Bonsoir a tous! Je cherche depuis quelque jours comment fair pour précharger un site avec des animation flash et des images. Enfaite j'aimerais q Javascript et rrdtool [ par gaston_gaston ] Bonjour,J'ai une page html où je voudrais créer un boutons qui permet d'afficher un graphe (en utilisant rrdtool). (le graphe n'est aff Vacances :et si j'allais en Javascript ou en php? [ par durand2504 ] Bonjour à tous, je veux créer un site web pour une asso avec quelques fonctionnalité qui feront qu'il ne peux être juste en HTML. problèmes d'impression [ par billy21121 ] Bonjour a tous, Je voudrais simplement un petit renseignement à propos des impressions en javascript. Est il possible de forcer les propriét Supprimer un espace [ par ansdodou ] Salut je suis débutant en javascript je voudrai savoir s'il existe une intruction en javascript qui permet l'espace à gauche ou à droi

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice

Forum

PB GETTER ET SETTER SUR IE<9 par aerolyte

CREATION DE SCORING OU RATING par Alex16000

API ANYWHERE DE TWITTER par coach872

RE : VéRIFICATION FORMULAIRE par maha1987

SCROLL D'IMAGES DANS UNE PAGE HTML : ORDRE ALéATOIRE DES IMAGES ? par cyber5784

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Creation d-un site internet similaire a Meetic CDC Disponible
Budget : 8 000€
Integration E commerce d-une application graphique interactive
Budget : 4 000€
URGENT-Developpement d-un annuaire
Budget : 13 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011