Mouse tracking eyes logo animation - javascript-CodePudding

I have this logo which has 2 eyes in it. I'd like to get the animated effect which will track the cursor position and look at it whole time.

I need this:

I have created this solution but still have some problem with the width of the eyes and once I get it more wide, it gets out of the border.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
  @import url("https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap");

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;  
 }

.container {
    display: flex;
    background: white;
    border-radius: 48px;
    width: auto;
    padding: 1em 2em;
}

.container .eyes {
position: relative;
width: 80px;
height: 80px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 2px solid black;
}
.eyes:first-child{
  z-index:9
 }
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}

  </style>
</head>
<body>

      <div >
        <div ></div>
        <div ></div>
      </div>

    <script type="text/javascript">
    document.querySelector("body").addEventListener("mousemove", eyeball);

    function eyeball() {
      const eye = document.querySelectorAll(".eyes");
      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 rotate = radian * (180 / Math.PI) * -1   270;
        eye.style.transform = "rotate("   rotate   "deg)";
      });
    }

    </script>
</body>
</html>

CodePudding user response：

1- don't style container and eye together. actually, you have some unnecessary styles.

2- add overflow: auto; to the eye.

3- you better differentiate the eye border color from the eyeballs, because if it's the same, the eyeballs look extended a little. it's up to you.

here is the code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
  @import url("https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap");

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;  
 }

.container {
    display: flex;
    background: white;
    border-radius: 48px;
    width: auto;
    padding: 1em 2em;
}

.eyes {
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 1px solid orange;
overflow: auto;
}
.eyes:first-child{
  z-index:9
 }
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}

  </style>
</head>
<body>

      <div >
        <div ></div>
        <div ></div>
      </div>

    <script type="text/javascript">
    document.querySelector("body").addEventListener("mousemove", eyeball);

    function eyeball() {
      const eye = document.querySelectorAll(".eyes");
      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 rotate = radian * (180 / Math.PI) * -1   270;
        eye.style.transform = "rotate("   rotate   "deg)";
      });
    }

    </script>
</body>
</html>