Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Mootools class for an eye following the mouse and/or the finger

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 Demo
Octocat-spinner-32 Docs
Octocat-spinner-32 Source
Octocat-spinner-32 LICENCE
Octocat-spinner-32 README.md
Octocat-spinner-32 package.yml
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.