Google xEyes JavaScript

Google xEyes JavaScript - from google.com/ig

by Marcos F

HTML

<div class="holder">
   <div class="eye">
     <div class="iris" id="EYES_pupil00"></div>
   </div>
   <div class="eye">
     <div class="iris" id="EYES_pupil10"></div>
   </div>
</div>

CSS

.holder{
  display: flex;
  flex-direction: row;
  column-gap: 30px;
}
.eye{
  width:14px;
  height:14px;
  border-radius: 50%;
  border: 1px solid red;
}
.iris {
  position:relative;
  width:7px;
  height:7px;
  left:0px;
  top:0px;
  background: black;
  border-radius: 50%;
}

JavaScript

var EYES0 = {
    MAX_DIST: 0,
    // furthest pupil can move from center
    EYE_RADIUS: 0,
    // eye image width / 2
    PUPIL_RADIUS: 0,
    // pupil image width / 2
    pupils: [],

    init: function() {
    	var bounds = document.querySelector('.eye').getBoundingClientRect();
    		EYES0.EYE_RADIUS = bounds.width / 2;
        EYES0.MAX_DIST = EYES0.EYE_RADIUS * .3;
        var bounds = document.querySelector('.iris').getBoundingClientRect();
        EYES0.PUPIL_RADIUS = bounds.width / 2;
    
        if (document.addEventListener) {
            document.addEventListener('mousemove', EYES0.moveEyes, false);
        } else if (document.attachEvent) {
            document.attachEvent('onmousemove', EYES0.moveEyes);
        }
        EYES0.pupils = [document.getElementById("EYES_pupil00"), document.getElementById("EYES_pupil10")];
    },
    moveEyes: function(e) {
        if (!e) e = window.event;
        var app = EYES0;
        for (var i = 0; i < app.pupils.length; i++) {
            var pupil = app.pupils[i];

            // The middle points of the eyes
            var midx = app.getPagePos(pupil.parentNode, true) + app.EYE_RADIUS;
            var midy = app.getPagePos(pupil.parentNode, false) + app.EYE_RADIUS;

            // Page scroll
            var scrollx = 0;
            var scrolly = 0;
            if (typeof(window.pageXOffset) == 'number') {
                scrollx = window.pageXOffset;
                scrolly = window.pageYOffset;
            } else {
                scrollx = document.documentElement.scrollLeft;
                scrolly = document.documentElement.scrollTop;
            }

            // The distX/distY from eye middles to the mouse
            var distX = e.clientX + scrollx - midx;
            var distY = e.clientY + scrolly - midy;
            // The absolute distance from eye middles to the mouse
            var dist = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));

            if (dist > app.MAX_DIST) {
             ...