Scribd
Upload
13 views2 pages

Cursor Chaser Eyes

This document is an HTML file that creates a simple web page featuring two animated eyes that follow the cursor movement. The eyes are styled with CSS to appear circular and have pupils that move in response to mouse movements. JavaScript is used to calculate the angle and position of the pupils based on the cursor's location relative to the eyes.

Uploaded by

ahmad.am.af3232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views2 pages

Cursor Chaser Eyes

This document is an HTML file that creates a simple web page featuring two animated eyes that follow the cursor movement. The eyes are styled with CSS to appear circular and have pupils that move in response to mouse movements. JavaScript is used to calculate the angle and position of the pupils based on the cursor's location relative to the eyes.

Uploaded by

ahmad.am.af3232
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cursor Chasing Eyes</title>
<style>
body {
background-color: #222;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.eye-container {
display: flex;
gap: 40px;
}
.eye {
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.pupil {
width: 30px;
height: 30px;
background: black;
border-radius: 50%;
position: absolute;
transition: 0.05s linear;
}
</style>
</head>
<body>
<div class="eye-container">
<div class="eye"><div class="pupil"></div></div>
<div class="eye"><div class="pupil"></div></div>
</div>
<script>
document.addEventListener("mousemove", (event) => {
const eyes = document.querySelectorAll(".eye");
eyes.forEach((eye) => {
const pupil = eye.querySelector(".pupil");
const eyeRect = eye.getBoundingClientRect();
const eyeX = eyeRect.left + eyeRect.width / 2;
const eyeY = eyeRect.top + eyeRect.height / 2;
const deltaX = event.clientX - eyeX;
const deltaY = event.clientY - eyeY;
const angle = Math.atan2(deltaY, deltaX);
const maxMove = 20;
const pupilX = Math.cos(angle) * maxMove;
const pupilY = Math.sin(angle) * maxMove;
pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
});
});
</script>
</body>
</html>

You might also like