Animated Eyes Follow Mouse Cursor

Alizeh Codes January 30, 2025

 Animated Eyes Follow Mouse Cursor | CSS & JavaScript Effect

Introduction

Ever wondered how to create animated eyes that follow the mouse cursor? This cool effect adds a fun and interactive element to web pages. Whether you're designing a creative website, a game UI, or just experimenting with JavaScript animations, this tutorial will guide you through building animated eyes that track the cursor using HTML, CSS, and JavaScript.

CSS Animation, CSS JS Effects

Animated Eyes Follow Mouse Cursor

In this tutorial, we will:

  • Create realistic eye movement with CSS and JavaScript.
  • Use event listeners to track the cursor.
  • Apply smooth animations for a natural effect.
  • Keep it lightweight and performance-optimized.

Why Use Interactive Animations?

Animations like this make your website more engaging and visually appealing. Some benefits include:

  • Enhanced user interaction for better engagement.
  • Lightweight effects that don’t slow down performance.
  • Easy customization to fit any web design.
  • Watch full tutorial

Now, let’s dive into the coding part! 🚀

Step 1: Setting Up HTML Structure

We’ll start by creating two eyes inside a container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Eyes Follow Mouse Cursor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="face">
        <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>
    </div>
</body>
</html>

Here, we have a container that holds two eye divs, each with a pupil inside.

Step 2: Styling the Eyes with CSS

Now, let’s add some styling to create the eye shapes and position them properly.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.face{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #ffcd00;
    display: flex;
    justify-content: center;
    align-items: center;
}
.face::before{
    content: '';
    position: absolute;
    top: 180px;
    width: 150px;
    height: 70px;
    background: #b57700;
    border-bottom-right-radius: 70px;
    border-bottom-left-radius: 70px;
    transition: 0.6s;
}
.face:hover::before{
    top: 210px;
    width: 150px;
    height: 20px;
    background: #b57700;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.eyes{
    position: relative;
    top: -40px;
    display: flex;
}
.eyes .eye{
    position: relative;
    width: 80px;
    height: 80px;
    display: block;
    background: #fff;
    margin: 0 15px;
    border-radius: 50%;
}
.eyes .eye::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 25px;
    width: 40px;
    height: 40px;
    background: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

This will:

  • Style the eyes as white circles with a slight glow.
  • Place eye in the center.
  • Add smooth transitions for a realistic effect.

Step 3: Adding JavaScript for Eye Movement

Now, let’s use JavaScript to track the mouse movement and move the pupils accordingly.

document.querySelector('body')
        .addEventListener('mousemove', eyeball);
        function eyeball(){
            var eye = document.querySelectorAll('.eye');
            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 rot = (radian * (180 / Math.PI) * -1) + 270;
                eye.style.transform = "rotate("+ rot +"deg)";
            })
        }

How This Works:

  • Captures mouse position using mousemove event.
  • Calculates angle and distance between the pupil and cursor.
  • Moves the pupil accordingly within a limited range for a realistic effect.

Step 4: Enhancing the Animation

To make the effect even more realistic:

  • Add different pupil sizes for variation.
  • Change the background color when the eyes move.
  • Add a blinking effect using CSS keyframes.

Example blinking effect:

@keyframes blink {
    0%, 100% { height: 80px; }
    50% { height: 5px; }
}

eyes {
    animation: blink 4s infinite;
}

Live Demo & Customization Ideas

This effect is fun and can be customized in many ways:

  • Use SVG graphics instead of CSS shapes for more detail.
  • Add cartoon eyes with expressive animations.
  • Implement different tracking behaviors, like delayed motion.
  • Watch Full Video Tutorial

Want More?

If you found this tutorial helpful, share it and follow for more CSS & JavaScript animation effects! 🚀

#CSSAnimation #JavaScriptEffects #EyeTracking #WebDevelopment #FrontendMagic #InteractiveDesign #CSSMouseEffect #JavaScriptAnimations

Tags:

Post a Comment

0 Comments