Membuat efek mata bergerak mengikuti cursor mouse

Membuat efek mata bergerak mengikuti cursor mouse, merupakan salah satu dari sekian banyak efek untuk menghias dan mempercantik tampilandari blog dan artikel ini juga merupakan sebuah update tentang pengetahuan blogging setelah sekian lama saya tidak pernah membuat postingan seputar blogging. Untuk Membuat efek mata bergerak mengikuti cursor mouse ini memerlukan kode yang lumayan banyak akan tetapi tidak membuat blog kita loadingnya menjadi berat, mekipun ada efek pada loading blog akan tetapi itu sangat kecil sekali dan hampir tidak kelihatan.
Sebelum Membuat efek mata bergerak mengikuti cursor mouse alangkah baiknya jika anda melihat contoh jadinya agar nanti tidak kecewa, untuk melihat hasilnya silahkan klik disini.
Untuk  Membuat efek mata bergerak mengikuti cursor mouse ini anda tinggal copy code di bawah ini dan letakkan dibawah code </head>

<script type="text/javascript">
// <![CDATA[
var width=150; // width of the eyes in pixels
var colour="#06f"; // colour of the eye - bluey green in this case
var iris="#000"; //   colour of the iris (normally black);

/***************************\
*   Moving Eyeballs Effect  *
*(c)2012-3 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, 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, m;
  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";
  document.body.appendChild(glasses);
  lefteye=document.createElement("div");
  righteye=document.createElement("div");
  i=lefteye.style;
  j=righteye.style;
  i.position=j.position="absolute";
  i.width=j.width="1px";
  i.height=j.height="1px";
  i.overflow=j.overflow="visible";
  i.zIndex=j.zIndex="101";
  glasses.appendChild(lefteye);
  glasses.appendChild(righteye);
  for (m=-1.1; m<2; m+=2.2) for (i=-width; i<width; i++) {
    l=Math.pow(width*width-i*i, 0.5);
    j=line(m*width-l, i, 2*l, colour, 0.5);
	glasses.appendChild(j);
  }  
  for (i=-width/2; i<width/2; i++) {
    l=Math.pow(width*width/4-i*i, 0.5);
    j=line(-1.1*width-l, i, 2*l, iris, 0.8);
	lefteye.appendChild(j);
  }
  for (i=-width/2; i<width/2; i++) {
    l=Math.pow(width*width/4-i*i, 0.5);
    j=line(1.1*width-l, i, 2*l, iris, 0.8);
	righteye.appendChild(j);
  }
  set_width();
  set_scroll();
}

function line(left, top, width, colour, opacity) {
  var d, s;
  d=document.createElement("div");
  s=d.style;
  s.position="absolute";
  s.height="1px";
  s.width=width+"px";
  s.left=left+"px";
  s.top=top+"px";
  s.overflow="hidden";
  s.backgroundColor=colour;
  s.pointerEvents="none";
  s.opacity=opacity;
  if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(opacity*100)+")";
  return d;
}

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.1*width)-(swide*0.5);
  ydiff=y-shigh/2;
  distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
  if (distn>width/2.5) {
    xdiff=xdiff*width/distn/2.5;
    ydiff=ydiff*width/distn/2.5;
  }
  lefteye.style.top=ydiff+"px";
  lefteye.style.left=xdiff+"px";

  xdiff=x-(1.1*width)-(swide*0.5);
  ydiff=y-shigh/2;
  distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
  if (distn>width/2.5) {
    xdiff=xdiff*width/distn/2.5;
    ydiff=ydiff*width/distn/2.5;
  }
  righteye.style.top=ydiff+"px";
  righteye.style.left=xdiff+"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>

Silahkan di praktekkan semoga berhasil dan mudah-mudahan anda puas.
Selamat mencoba.

Sumber kode: http://www.mf2fm.com/rv/dhtmlmovingeyes.php

Tweet