глаза саймона

глаза следят за курсором

by avgustre

HTML

<div id="cat">
  <div id="cat-eye-left" class="cat-eye">
    <div class="cat-eyeball"></div>
  </div>
  <div id="cat-eye-right" class="cat-eye">
    <div class="cat-eyeball"></div>
  </div>
</div>


<p style="display:none">
http://gnatkovsky.com.ua/skript-dvizhenie-za-kursorom-slezhenie-za-kursorom.html
</p>

CSS

#cat {
  margin: 15% auto 0;
}

#cat:before {
  content: '';
  width: 587px;
  background: url(http://gnatkovsky.com.ua/files/cat_scrpt/nofound.png) center top no-repeat;
  height: 410px;
  position: absolute;
  left: 50%;
  margin-left: -293px;
}

#cat {
  position: relative;
  width: 100%;
}

.cat-eye {
  position: absolute;
  display: none;
  width: 60px;
  height: 61px;
}

.cat-eyeball {
  position: absolute;
  left: 22.5px;
  top: 24.5px;
  width: 16px;
  height: 16px;
  background: url(http://gnatkovsky.com.ua/files/cat_scrpt/eyes.png);
}

#cat-eye-left {
  top: 82px;
  left: 50%;
  margin-left: -75px;
}

#cat-eye-right {
  top: 82px;
  left: 50%;
  margin-left: -5px;
}

JavaScript

var el1 = $('#cat-eye-left'),
  eyeBall1 = el1.find('div');
var el2 = $('#cat-eye-right'),
  eyeBall2 = el2.find('div');
el1.show();
el2.show();
var x1 = el1.offset().left + 37,
  y1 = el1.offset().top + 25;
var r = 10,
  x, y, x2, y2, isEyeProcessed = false;
$('html').mousemove(function(e) {
  if (!isEyeProcessed) {
    isEyeProcessed = true;
    var x2 = e.pageX,
      y2 = e.pageY;
    y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1;
    x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1;
    eyeBall1.css({
      marginTop: (y - y1 + 1) + 'px',
      marginLeft: (x - x1) + 'px'
    });
    eyeBall2.css({
      marginTop: (y - y1 + 1) + 'px',
      marginLeft: (x - x1) + 'px'
    });
    isEyeProcessed = false;
  }
});