Eyes that follow your mouse :: RV's free DHTML and JavaScript text and graphic scripts ::

MOVING EYES MOUSE EFFECT

This script has been tested on and shown to work with the following browsers: Internet Explorer version 7 and above Google Chrome version 4 and above Mozilla Firefox version 2 and above Apple Safari version 5 and above Opera version 9 and above (including Opera mobile) Android Browser version 3 and above

22-Jul-20: Completely overhauled for better performance. 09-Jun-2013: Modified so that you can click items behind the eyes. 13-Apr-2012: First version published.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var width=144; // radius of the eyes in pixels var colour="#06c"; // colour of the eye - bluey green in this case var iris="#111"; // colour of the iris (normally black); /**************************\ Moving Eyeballs Effect * (c)2012-20 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * \**************************/ var swide=800; var shigh=600; var sleft=sdown=0; var glasses, lefteyeball, righteyeball, lefteye, righteye; function addLoadEvent(funky) { var oldonload=window.onload; if (typeof(oldonload)!='function') window.onload=funky; else window.onload=function() { if (oldonload) oldonload(); funky(); } } addLoadEvent(draw_eyes); function draw_eyes() { var i, j, l, r; glasses=document.createElement("div"); i=glasses.style; i.position="fixed"; i.top="50%"; i.left="50%"; i.width="1px"; i.height="1px"; i.overflow="visible"; i.zIndex="100"; i.pointerEvents="none"; document.body.appendChild(glasses); lefteyeball=document.createElement("div"); righteyeball=document.createElement("div"); i=lefteyeball.style; j=righteyeball.style; i.position=j.position="absolute"; i.width=j.width=(width2)+"px"; i.height=j.height=(width2)+"px"; i.top=j.top=(-width)+"px"; i.left=(-2.1width)+"px"; j.left=(.1width)+"px"; i.borderRadius=j.borderRadius="50%"; i.backgroundColor=j.backgroundColor=colour; i.background=j.background="radial-gradient(circle at "+width+"px "+width+"px, #fff, "+colour+" 75%)"; i.opacity=j.opacity="0.5"; i.zIndex=j.zIndex="100"; glasses.appendChild(lefteyeball); glasses.appendChild(righteyeball); lefteye=document.createElement("div"); righteye=document.createElement("div"); i=lefteye.style; j=righteye.style; i.position=j.position="absolute"; i.width=j.width=width+"px"; i.height=j.height=width+"px"; i.top=j.top=(-width/2)+"px"; i.left=(-1.6width)+"px"; j.left=(.6width)+"px"; i.borderRadius=j.borderRadius="50%"; i.backgroundColor=j.backgroundColor=iris; i.opacity=j.opacity="0.8"; i.zIndex=j.zIndex="101"; glasses.appendChild(lefteye); glasses.appendChild(righteye); set_width(); set_scroll(); } document.onmousemove=mouse; function mouse(e) { var x, y, xdiff, ydiff, distn; y=(e)?e.pageY:event.y; x=(e)?e.pageX:event.x; x-=sleft; y-=sdown; xdiff=x+(1.1width)-(swide0.5); ydiff=y-shigh/2; distn=Math.pow(xdiffxdiff+ydiffydiff,0.5); if (distn>width/2.5) { xdiff=xdiffwidth/distn/2.5; ydiff=ydiffwidth/distn/2.5; } lefteye.style.top=(ydiff-width/2)+"px"; lefteye.style.left=(xdiff-1.6width)+"px"; xdiff=x-(1.1width)-(swide0.5); ydiff=y-shigh/2; distn=Math.pow(xdiffxdiff+ydiffydiff,0.5); if (distn>width/2.5) { xdiff=xdiffwidth/distn/2.5; ydiff=ydiffwidth/distn/2.5; } righteye.style.top=(ydiff-width/2)+"px"; righteye.style.left=(xdiff+0.6*width)+"px"; } document.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop \|\| document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop \|\| document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { var sw_min=999999; var sh_min=999999; if (document.documentElement && document.documentElement.clientWidth) { if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth; if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight; } if (typeof(self.innerWidth)!="undefined" && self.innerWidth) { if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth; if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight; } if (document.body.clientWidth) { if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth; if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight; } if (sw_min==999999 \|\| sh_min==999999) { sw_min=800; sh_min=600; } swide=sw_min; shigh=sh_min; } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the colour (and other parameters) at the start of the script you just copied to the settings you require. You can change the size of the eyes, their colour, and the colour of the iris (the bit in the middle!)
THAT'S IT When your page loads, you should find two googly eyes staring at wherever you move your mouse to.

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlmovingeyes.php.

This page has been viewed 443 times. It was last viewed on Sat 21 Dec, 2024 at 14:05