Press "Enter" to skip to content

jQuery Plugin to Configure the Eyes that Follow the Mouse | jqEye

jqEye, jQuery plugin allows you to define the behavior in which an HTML element moves, within an imaginary eye boundary, in order to track the mouse.

How to make use of it:

1. Put the newest version of the jqEye plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jqeye.min.js"></script>

2. Add pupils to eyes following the HTML structure as these:

<div id="eye">
  <div id="Pupil"></div>
</div>
/* example CSS */
#eye {
  width:50px; 
  height:50px; 
  position:relative; 
  border:1px solid gray; 
  border-radius:25px;
}

#pupil {
  width:10px; 
  height:10px; 
  left:20px; 
  top:20px; 
  border-radius:5px; 
  background-color:blue; 
  position:relative;
}

3. Call the function on the pupil component to activate the plugin.

$(function(){
  $("#Pupil").jqEye();
});

4. Determine the shape of the eye: ‘circle’, ‘ellipse’, ‘rectangle’, or ’rounded rectangle’.

$("#Pupil").jqEye({
  shape: "circle"
});

5. Specify the width and height of the eye, if the shape is a rectangle or an ellipse.

$("#Pupil").jqEye({
  shape: "rectangle",
  width: 40,
  height: 40
});

6. Specify the radius of the eye, if the shape is a circle or a rounded rectangle.

$("#Pupil").jqEye({
  radius: 20
});

Animated Eyes Follow Cursor When Moving, jqEye Plugin/Github


See Demo And Download

Official Website(jfmdev): Click Here

This superior jQuery/javascript plugin is developed by jfmdev. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *