jQuery plugin for make eyes that follow the mouse
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Demos
Misc
Source
README.md
bower.json
jqeye.jquery.json
license.txt
package.json

README.md

jqEye

Make eyes that follow the mouse

A jQuery plugin that allows to define a behaviour in which a HTML element moves, within the boundaries of an imaginary eye, in order to follow the mouse.

Demos

Basic: http://jsfiddle.net/L43zcmq4/4/

Advanced: http://jsfiddle.net/78ktpaqv/11/

How to use

Step 1: Add references to the files of jQuery and jqEye in the header section of the HTML document.

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqeye.js"></script>

Step 2: Define, in the body of the HTML document, the element which is going to act as the pupil. Note that the initial position of this element is going to be considered as the centre of the eye.

    <div style="width:50px; height:50px; position:relative; border:1px solid gray; border-radius:25px;">
        <div id="Pupil" style="width:10px; height:10px; left:20px; top:20px; border-radius:5px; background-color:blue; position:relative;"></div>
    </div>

Step 3: Select the element, using jQuery, and invoke the method jqEye().

    jQuery(document).ready(function() {
        jQuery("#Pupil").jqEye();
    });

By default, the eyes has a circular shape and the pupil can move within a radius of 20 pixels. However this can be changed by using the "options" parameter:

  • The property "options.shape" defines the shape of the eye, it can be 'circle', 'ellipse', 'rectangle' and 'rounded rectangle';
  • The property "options.radius" defines the radius of the eye, if the shape is a circle, or the radius of his corners, if the shape is a rounded rectangle;
  • The properties "options.width" and "options.height" defines the width and height of the eye, if the shape is a rectangle or an ellipse.

For example:

    jQuery(document).ready(function() {
        jQuery("#Pupil_1").jqEye({shape: "circle", radius:10});
        jQuery("#Pupil_2").jqEye({shape: "ellipse", width:40, height:20});
        jQuery("#Pupil_3").jqEye({shape: "rectangle", width:40, height:20});
        jQuery("#Pupil_4").jqEye({shape: "rounded rectangle", width:40, height:40, radius:10});
    });

License

This library is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this library, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.