Animated Eyes Follow Mouse Cursor | JavaScript Mouse move
Tags: html, css, javascript, beginners
Published: 2020-12-26 16:24:19

Hello guys in this tutorial, we are going to learn how create Animated Eyes Follow Mouse Cursor using JavaScript.

First we need to create two files **index.html** and style.css then we need to do code for it.
###Animated Eyes Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Face</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="face">
       <div class="eye-outer">
          <div class="left-eye">
            <svg viewBox="0 0 21 21">
                <circle class="eye eye-left" cx="10.5" cy="10.5" r="2.25"></circle>
                <path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
                <path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
           </svg>  
          </div>
          <div class="right-eye">
             <svg viewBox="0 0 21 21">
                  <circle class="eye eye-right" cx="10.5" cy="10.5" r="2.25"></circle>
                  <path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
                  <path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
             </svg>
          </div>
       </div>
       <div class="mouth-outer">
         <svg viewBox="0 0 21 21">
              <path class="top" d="M2 10.5C2 10.5 6.43686 5.5 10.5 5.5C14.5631 5.5 19 10.5 19 10.5"></path>
              <path class="bottom" d="M2 10.5C2 10.5 6.43686 15.5 10.5 15.5C14.5631 15.5 19 10.5 19 10.5"></path>
         </svg> 
       </div>
    </div>
    <script type="text/javascript">
        const eye1 = document.querySelector('.eye-left');
        const eye2 = document.querySelector('.eye-right')
        window.addEventListener('mousemove', (evt) => {
            const x = -(window.innerWidth / 2 - evt.pageX) / 160;
            const y = -(window.innerHeight / 2 - evt.pageY) / 160;
            eye1.style.transform = `translateY(${y}px) translateX(${x}px)`;
            eye2.style.transform = `translateY(${y}px) translateX(${x}px)`;
        });  
    </script>
  </body>
</html>
```
###Animated Eyes Step:2###
Then we need to add code for **style.css** which code i provide in below screen.

```css
* {
    padding: 0;
    margin: 0;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
svg {
    display: block;
    width: 80px;
    height: 80px;
    pointer-events: none;
    transform-style: preserve-3d;
}
circle.eye {
    fill: #a1a1b6;
}
path.top, path.bottom {
    fill: transparent;
    stroke: #a1a1b6;
    stroke-width: 1.3px;
    stroke-linecap: round;
}
.eye-outer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 15px;
}
.face {
    border: 8px solid #a1a1b6;
    border-radius: 50%;
    width: 220px;
    height: 220px;
}
.mouth-outer {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mouth-outer svg {
    width: 100px;
    height: 100px;
}
.mouth-outer path.top, .mouth-outer path.bottom {
    stroke-width: 2px;
}
```
###JavaScript Mouse move video output:###
{% youtube _kzi_J8agKU %}

####JavaScript Mouse move Codepen output:####
{% codepen https://codepen.io/stack-findover/pen/qBRgqyX %}

> For more interesting content

<a href="http://blog.stackfindover.com/" rel="dofollow">Visit for more!</a>