Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 26, 2020 04:24 pm GMT

Animated Eyes Follow Mouse Cursor | JavaScript Mouse move

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

<!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>

Enter fullscreen mode Exit fullscreen mode

Animated Eyes Step:2

Then we need to add code for style.css which code i provide in below screen.

* {    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;}

Enter fullscreen mode Exit fullscreen mode

JavaScript Mouse move output:

For more interesting content

Visit for more!

Original Link: https://dev.to/stackfindover/animated-eyes-follow-mouse-cursor-javascript-mouse-move-3n40

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To