Skip to content
Mootools class for an eye following the mouse and/or the finger
JavaScript Perl
Find file
Latest commit b1c7205 Mar 14, 2013 @Goutte Fix for #1 (manage resize)
Failed to load latest commit information.
Demo/assets/img
Docs Initial commit (with the code) Jun 24, 2012
Source Fix for #1 (manage resize) Mar 14, 2013
LICENCE Fix for #1 and LICENCE update Mar 14, 2013
README.md Update README.md Oct 22, 2012
package.yml Fix for #1 and LICENCE update Mar 13, 2013

README.md

Eye

Logo

Make the pupil of an eye follow the mouse. The eye is following the mouse by moving inside a circular eye socket. We assume the eye is initially positioned at the center of the circle. Its position must be absolute or relative. (we're using top and left)

Image assets are shamelessly ripped off the Binding of Isaac

Demo

http://jsfiddle.net/goutte/B2Nza

How to use

HTML

<div id="face">
  <div id="left_eye"  class="left_eye"></div>
  <div id="right_eye" class="right_eye"></div>
</div>

CSS

.face {
    position: relative;
    margin: 30px auto;
    width:  49px;
    height: 41px;
    background: url(https://github.com/Goutte/Eye/raw/master/Demo/assets/img/head.png) no-repeat;
}

.left_eye {
    position: absolute;
    left: 11px;
    top:  13px;
    width:  3px;
    height: 3px;
    background: url(https://github.com/Goutte/Eye/raw/master/Demo/assets/img/leftPupil.png) no-repeat;
}

.right_eye {
    position: absolute;
    left: 36px;
    top:  13px;
    width:  3px;
    height: 4px;
    background: url(https://github.com/Goutte/Eye/raw/master/Demo/assets/img/rightPupil.png) no-repeat;
}

JAVASCRIPT

var options = {
  socketRadius: 4, // radius of the circle in which the eye's pupil can move
  stickToSocket: false, // constraint the eye to the perimeter of the circle
  bindMouseMove: true,
  bindTouchMove: false,
}

var leftEye  = new Eye ('left_eye', options);
var rightEye  = new Eye ('right_eye', options);
Something went wrong with that request. Please try again.