Goutte/Eye Demo

This page loads the latest version of Eye.js, see "Manage Resources" Find the project on github : https://github.com/Goutte/Eye

by secretgspot

HTML

<script src="https://raw.github.com/Goutte/Eye/master/Source/Eye.js"></script>
<div class="face">
  <div id="left_eye1" class="left_eye"></div>
  <div id="right_eye1" class="right_eye"></div>
</div>

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

<div class="poo" title="nutella">
  <div id="fly1" class="fly slick"></div>
  <div id="fly2" class="fly slick"></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;
}

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

.fly {
    position: absolute;
    left: 10px;
    top:  -5px;
    width:  17px;
    height: 14px;
    background: url(https://github.com/Goutte/Eye/raw/master/Demo/assets/img/fly.gif) no-repeat;
}

/** to obtain a cheap 'smooth' effect on the flies **/
.slick {
  -webkit-transition: all 0.3s ease-out;
  -khtml-transition:  all 0.3s ease-out;
  -moz-transition:    all 0.3s ease-out;
  -o-transition:      all 0.3s ease-out;
  transition:         all 0.3s ease-out;
}

JavaScript

var options1 = {
  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,
  eventListenerElement: window
}

var leftEye1  = new Eye ('left_eye1', options1);
var rightEye1 = new Eye ('right_eye1', options1);


// The second face has less eye amplitude

var options2 = {
  socketRadius: 2, // radius of the circle in which the eye's pupil can move
  bindTouchMove: true,
}

var leftEye2  = new Eye ('left_eye2', options2);
var rightEye2 = new Eye ('right_eye2', options2);


// You can use it for other purposes than pupils
// ...searching for the perfect name(s)...

var fly1 = new Eye ('fly1', {
    socketRadius: 17,
    behavior: 'flee',
    stickToSocket: true
});
var fly2 = new Eye ('fly2', {
    socketRadius: 17,
    behavior: 'follow',
    stickToSocket: true
});