Moving Eyes with Mouse Movement | HTML, CSS, JavaScript

I am sharing a web application script that displays an emoji with eyes that follow the mouse cursor. This program showcases how to manipulate the Document Object Model (DOM) using JavaScript. By studying this script, you can learn the basics of DOM manipulation and see how JavaScript can be used to create interactive web elements.

If you're interested in learning how to create simple web applications with animations triggered by mouse movements, this source code could be very helpful. It provides a practical example of how to implement interactive features, making your web pages more engaging and dynamic.

The key concepts involved in creating moving eyes with mouse movement in EF Core are:

• Selecting the body element and adding a mousemove event listener to trigger the eyeball function.
• Defining the eyeball function that moves the eyes based on mouse position.
• Selecting all elements with the class "eye".
• Calculating the center coordinates of the eye element.
• Calculating the angle between the mouse position and eye center.
• Converting the angle to degrees for CSS rotation.
• Applying the rotation transformation to the eye element.

Code Structure

Creating moving eyes with mouse movement in EF Core is a straightforward process. First, we select the body element and add a mousemove event listener to trigger the eyeball function. This function is responsible for moving the eyes based on the mouse's position.

To achieve this, we select all elements with the class "eye" and iterate over each one. For each eye element, we calculate its center coordinates and determine the angle between the mouse position and the eye's center. We then convert this angle to degrees for CSS rotation and apply the rotation transformation to the eye element, making it appear as though the eyes are following the mouse movement.

Here's the JavaScript code that I created to make the eye of the emoji follows the location of the mouse cursor:

document.querySelector("body").addEventListener("mousemove", eyeball);
 
function eyeball() {
	let eyes = document.querySelectorAll(".eye");
	eyes.forEach((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)`;
	});
}

There you have it! I hope this Moving Eyes with Mouse Movement using HTML, CSS, and JavaScript will help you with what you are looking for and find something useful for your current and future projects.

Explore more on this website for more Tutorials, Free Source Code, and Article covering various programming languages.