Animated Eyes Follow Mouse Cursor jQuery Plugin

The jQuery Eyes Follow Mouse plugin adds a pair of animated eyes that follow the mouse cursor to your website or application in a fun and interactive way. Eyes Follow Mouse plugin creates a pair of eyes that follow the user's mouse cursor using CSS3 animations and transforms. You can customise the size, colour, and shape of the eyes to match the design of your website.

You can also add multiple sets of eyes to your page, each with its own set of parameters. This plugin is an excellent way to add some playful interactivity to your website and keep your visitors interested.

The plugin animates the eyes with CSS3 and jQuery and is compatible with a wide range of browsers.

Eyes Follow Mouse Implementation

Include jquery-eyes-follow-mouse.js

Add the below HTML code

Style your page

/* eye-follow-mouse-cursor.css */
.eyes {
  width: 300px;
  height: 200px;
  position: relative;
  border-radius: 200px / 90px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
 
.eye {
  width: 90px;
  height: 90px;
  border-radius: 60%;
  background: #272928;
  position: absolute;
  top: 30%;
  transition: transform .3s ease-in-out;
}
 
.eye-retina {
  width: 60px;
  height: 60px;
  border-radius: 70%;
  background: white;
  position: absolute;
  top: 25%;
  left: 25%;
  transform: translate(-60%, -60%);
}