Ksheesh Googly Eyes

Demo

Enough talking. Too see KGE in action, move the cursor above the image. If you want, you can use whole document as an area which triggers eyes. It's up to you.

<div id="demoImgContainer">
  <div class="eye eye15" id="eye1"></div>
  <div class="eye eye15" id="eye2"></div>
  <div class="eye eye6" id="eye3"></div>
  <div class="eye eye6" id="eye4"></div>
  <div class="eye eye5 eyeRed" id="eye5"></div>
  <div class="eye eye5 eyeRed" id="eye6"></div>
</div>

$(document).ready(function() {
  $('#eye1').googly({x: 210, y: 338, distance: 6});
  $('#eye2').googly({x: 243, y: 338, distance: 6});
  $('#eye3').googly({x: 380, y: 435, distance: 7});
  $('#eye4').googly({x: 405, y: 435, distance: 7});
  $('#eye5').googly({x: 346, y: 222, distance: 1});
  $('#eye6').googly({x: 356, y: 214, distance: 2});
});

#demoImgContainer { position:relative; width:500px; height:650px; margin:0 auto; background:url('img/googly.png') 0 0 no-repeat; }
.eye { position:absolute; border-radius: 50%; background:black } /* CSS circles */
.eye15 { height:15px; width:15px } /* different sizes */
.eye6 { height:6px; width:6px }
.eye5 { height:6px; width:6px }
.eyeRed { background:red; } /* Red eye */

Download

Enough talking. Too see KGE in action, move the cursor above the image. If you want, you can use whole document as an area which triggers eyes. It's up to you.

Documentation

Requirements

• jQuery - both 2.x and 3.x branches are supported. For 3.x branch, you need full edition, not the slim one.
• Optionally jQueryUI - for better animation effects (easing)

Usage

For using KGE, you need proper object (e.g. eye) to animate, container and then initialize animating object. For now it's not possible to initialize many objects at once, so you have to initialize every eye. As jQuery must be able to move eyes, the CSS must be prepared to freely position it. Usually it will be like that:

.container { display:block; position:relative; }
.object { display:block; position:absolute; }

As it's still very basic plugin, there aren't any methods except initialization. The initialization method takes one parameter - object with options. The only required options are coordinates.

It might change in the future, without losing compatibility, but now coordinates are Cartesian, i.e. the ones used in your math class. The left-bottom of the screen is the 0, 0 point and values are rising in the direction of right-top corner. Speaking in CSS language, you need to provide [from the] left as x and [from the] bottom as y values. There's more about getting coordinates in the Tips section.

The basic initialization looks like:

$('#leftEye').googly({x: 100, y: 150});

This way we initialized some object with id leftEye and it will be placed 100 pixels from the left of the container (by default it's the parent of the #leftEye) and 150 pixels from the bottom. The other purely visual option is distance - this value controls how many pixels the object can move at most. By default it's 10 pixels. You may find that the experimenting with that value is the best way to achieve good effect. You might want to set where you need to move your cursor to trigger animation. It's set by the trigger option. It's the parent by default. Technically speaking by default it's the container which is by default the direct parent.

So let's get one example more, this time move advanced. There will be an eye, this time moving slower but reacting faster. The parent will be set to element with id face and the eye movement will be triggered by moving cursor around the area with id wrapper. Also we will use callback instead direct coordinates, which will set the default position of the eye to the exact middle of the #face.

$('#leftEye').googly({
  container: $('#face'),
  trigger: $('#wrapper'),
  x: function() { return $('#face').width() / 2; }, /* half of the width */
  y: function() { return $('#face').height() / 2; }, /* half of the height */
  minDelay: 100,
  moveTime: 500
});

If you are still unsure how it works, maybe you'll find the answer in the demo section. In the options section you'll read about parameters and the tips section provides both tips and examples of use, like how to easily get proper coordinates and how to make whole page the triggering area.

Options

Tips

Enough talking. Too see KGE in action, move the cursor above the image. If you want, you can use whole document as an area which triggers eyes. It's up to you.

Changelog

Just released, none yet!