Eyes Follow Mouse Cursor Animation

In this blog post, we will learn how to create Eyes Follow Mouse Cursor animation. It is a popular interactive animation that mainly requires JavaScript to create. In this snippet called Javascript eyes follow mouse effect, the position of the mouse cursor determines the movement of the animated eyes on a web page. In this javascript animation, the eyeballs of the eyes move based on the mouse coordinates. The following video tutorial shows how to create this JavaScript snippet step by step. Before collecting the source code, have a good look at the video tutorial. Subscribe to our channel if you like the content.

Video Tutorial:

Hope you have watched the video tutorial above. JavaScript is a powerful scripting language. With its tools for manipulating dynamic information, handling events, integrating with CSS, supporting canvas drawing, etc JavaScript enables developers to produce amazing animations. This "Eyes Follow Mouse Cursor" animation is a delightful and engaging feature of any webpage. It helps to capture the attention of the visitor and provides a sense of interactivity as well.

To create the Eyes Follow Mouse Cursor animation, we took a div named 'wrapper' and two divs named 'balls' were taken inside it. The 'balls' div will be used to make eyes and eyeballs. In CSS, we have used Flexbox to bring the container div 'wrapper' to the center of the viewport. Then the eyes and eyeballs are designed with the relative position of the 'balls' div and their pseudo-elements ':before' the absolute position. Then we created a 'mousemove' event listener in JavaScript to move the elements of the 'balls' class based on the position of the mouse relative to the center.

You May Also Like:

Eyes Follow Mouse Cursor Animation [ Source Code ]:

To create this 'Eyes Follow Mouse Cursor Animation' snippet, first create the HTML and CSS files. You can place the JavaScript code used here under the HTML file or create a separate js file and link the js file there. We put the code inside the script tag below the HTML. After creating the files, copy the code from the following code boxes and paste them into your project files. Open the code in the browser and see if it works. If it doesn't work then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eyes Follow Mouse Cursor in JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="wrapper">
        <div class="balls"></div>
        <div class="balls"></div> 
    </div>

    <script>
        document.querySelector("body").addEventListener("mousemove", animate);

        function animate() {
        let wrapper = document.querySelectorAll(".balls");
        wrapper.forEach((balls) => {
            let x = balls.getBoundingClientRect().left + balls.clientWidth / 2;
            let y = balls.getBoundingClientRect().top + balls.clientHeight / 2;

            let radian = Math.atan2(event.pageX - x, event.pageY - y);
            let rotate = radian * (180 / Math.PI) * -1 + 270;
            balls.style.transform = `rotate(${rotate}deg)`;
        });
        }
    </script>  
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #1a252b;
}
.wrapper {
	position: relative;
	top: 0;
	display: flex;
}
.wrapper .balls {
	position: relative;
	width: 70px;
	height: 70px;
	display: block;
	background: white;
	border-radius: 50%;
	margin: 0 15px;
}
.wrapper .balls::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #262626;
}

Hope the Eyes Follow Mouse Cursor javascript code is working properly. For more code snippets like this, click the Load More button on the homepage. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Eyes Follow Mouse Cursor Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Eyes Follow Mouse Cursor Animation

Video Tutorial:

Eyes Follow Mouse Cursor Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form