Animated Eyes Follow Mouse Cursor in JavaScript

In this article, you will learn how to create Animated Eyes Follow Mouse. Simple HTML CSS JavaScript is used here. Animation plays an important role in making a webpage attractive. Javascript eyes follow mouse effect has been created here. 

Earlier I shared a CSS follow mouse tutorial. But it is a bit different. Two eyes have been made here. Those two eyes will follow your mouse cursor. Here the eye will be in the same place but the eyepoint will change position.

JavaScript Eyes Follow Mouse Effect

To create this Eyes Follow Mouse Cursor design, some CSS and some JavaScript have been used. But to design it, you must have some idea about JavaScript. This type of animation can be used with any type of web element or logo.

I have given a demo below for your convenience. Here you will see a live preview of this Animated Eyes Follow. From here you can copy all the code directly.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

Two circles have been drawn on the dense blue webpage. That circle is designed in such a way that it looks like an eye. 

Small circles have been created in those circles which will act as eyeballs. This eyeball will follow your mouse cursor when you change the position of the mouse cursor.

Animated Eyes Follow Mouse Cursor in JavaScript

In this tutorial, I have shared step by step tutorial and source code. If you only want the source code, you can use the download button below the article. But if you are a beginner, you must follow the step-by-step tutorial below.

Step 1: Basic structure of Eyes Follow

I have created more structures and eyes for this project using the following HTML code.

<div class="container">

    <div class="eyes"></div>

    <div class="eyes"></div>

</div>

Now I have designed the web page using some amount of CSS. Here are some simple designs and use a deep blue background color on the web page.

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

font-family: "Bebas Neue", cursive;

background: #0c3b5a;  

 }

Step 2: Design the Eyes Follow Cursor

Now I have designed the circular circle that I made. Border-radius: 50% is used to make these circles width: 100px, height: 100px and completely round. It has also been made more attractive by using some shadows here.

.container {

display: flex;

}

.container .eyes {

position: relative;

width: 100px;

height: 100px;

display: block;

background-color: #fff;

margin: 0 20px;

border-radius: 50%;

box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2), inset 0 0 15px #f5af19,

  inset 0 0 25px #f5af19;

}

Now the eyeball has been created using 'before'. This eyeball will follow your mouse cursor. Borders of width: 50px, height: 50px have been used.

.container .eyes::before {

content: "";

top: 50%;

left: 35px;

transform: translate(-50%, -50%);

width: 50px;

height: 50px;

border-radius: 50%;

background: #000;

position: absolute;

border: 10px solid skyblue;

box-sizing: border-box;

}

Step 3: Activate Eyes Follow Mouse Cursor

Above we have designed the eyes follow mouse but now the animation will not work. The animation must be created by JavaScript. 

Below I have given all the JavaScript together and the necessary expressions. Hopefully, those explanations will help you understand the JavaScript code.

 document.querySelector("body").addEventListener("mousemove", eyeball);

 function eyeball() {

   const eye = document.querySelectorAll(".eyes");

   eye.forEach(function (eye) {

     let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;

     let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;

     let radian = Math.atan2(event.pageX - x, event.pageY - y);

     let rotate = radian * (180 / Math.PI) * -1 + 270;

     eye.style.transform = "rotate(" + rotate + "deg)";

   });

 }

I hope you have learned from this tutorial how to create Animated Eyes Follow Mouse Cursor. If there is any problem then you can definitely let me know by commenting. If you have trouble using the above codes, use the button below.

I have shared many CSS designs like this Eyes Follow Mouse Cursor before. If you are a beginner, you can watch those tutorials.

The download will start automatically