Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS


A face that is animated using JavaScript, HTML, and CSS. The face will move in the same direction as the cursor. This is one of the basic CSS and JavaScript effects. It is among the best examples for learning the idea of pseudo-elements for a newcomer.

When it comes to arranging and structuring website pages, CSS is far more useful and essential. A website page can now have more capabilities and collaborations because of JavaScript's continued development.

CSS is supported by every software, however JavaScript is only supported by functional programmes. You can use JavaScript to create responses for particular HTML and CSS elements when they are clicked.

Method − The fundamental concept of a face is drawn from CSS.

In this case, CSS and a small amount of JavaScript will be used to create the entire animation. We'll create the cartoon face primarily with CSS, and we'll enhance the face's eyeball flow with JavaScript. The main concept is that the faces' eyes will move in the direction of the mouse pointer, and when it touches a face, the mouse closes its mouth while opening it and laughing.

HTML source code − We will create the face's fundamental structure using HTML. We are going to take a few divs and assign them a class name so that we can customise it afterwards.

<div class="myFace">
   <div class="mytinyEyes">
      <div class="tinyEye"></div>
      <div class="tinyEye"></div>
   </div>
</div>
<div class="myFace">
   <div class="mytinyEyes">
      <div class="tinyEye"></div>
      <div class="tinyEye"></div>
   </div>
</div>

CSS source code − The area of a specific div will be defined using CSS, and we'll then add some CSS attributes like border-radius and background colour to give the section a round, cartoonish appearance. Additionally, we must use a hover effect, such as making the mouth close when the mouse pointer hovers over the face, to make this look more beautiful and realistic.

<style>
   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
   }
   body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #b37208;
   }
   .myFace {
      position: relative;
      width: 310px;
      height: 310px;
      border-radius: 50%;
      background-color: #ffcd00;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 10px;
   }
   .myFace::before {
      content: "";
      position: absolute;
      top: 190px;
      width: 160px;
      height: 80px;
      background: #c810dc;
      border-bottom-left-radius: 80px;
      border-bottom-right-radius: 80px;
      transition: 0.5s;
   }
   .myFace:hover::before {
      top: 210px;
      width: 150px;
      height: 20px;
      background: #c810dc;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
   }
   .mytinyEyes {
      position: relative;
      top: -40px;
      display: flex;
   }
   .mytinyEyes .tinyEye {
      position: relative;
      width: 90px;
      height: 90px;
      display: block;
      background: #fff;
      margin: 0 15px;
      border-radius: 50%;
   }
   .mytinyEyes .tinyEye::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: #333;
      border-radius: 50%;
   }
</style>

JavaScript source code − Due to the tinyEyeball's ability to travel in the direction of the mouse pointer, we additionally use a small amount of JavaScript here. We'll start by creating a function called tinyEyeball and then declare variables. Since there is nothing to print in this code, document.write wouldn't be used. However, we need to rotate the eyeball, therefore we use style as well as the class name "tinyEye" to do it. Next, the function is changed to a “rotate(“+rot+”deg)”. Eventually, our eye will be prepared to move.

<script>
   document.querySelector("body").addEventListener("mousemove", tinyEyeball);
   function tinyEyeball() {
      var tinyEye = document.querySelectorAll(".tinyEye");
      tinyEye.forEach(function(tinyEye) {
         
         // EyeWidth & EyeHeight are variables, where EyeWidth stands for the
         // mouse's eyeWidth coordinate and EyeHeight for its height.
         let eyeWidth = tinyEye.getBoundingClientRect().left + tinyEye.clientWidth / 2;
         let eyeHeight = tinyEye.getBoundingClientRect().top + tinyEye.clientHeight / 2;
         let radian = Math.atan2(event.pageX - eyeWidth, event.pageY - eyeHeight);
         
         // Rotate is referred to as rot in a variable.
         let rot = radian * (190 / Math.PI) * -1 + 280;
         tinyEye.style.transform = "rotate(" + rot + "deg)";
      });
   }
</script>

Example

The complete HTML, CSS, and JavaScript source code is available below.

<!DOCTYPE html>
<html>
<title>Design Smiley myFace mytinyEyes that follow Mouse Cursor using CSS and JS - TutorialsPoint
</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }

      body {
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         background: #b37208;
      }

      .myFace {
         position: relative;
         width: 310px;
         height: 310px;
         border-radius: 50%;
         background-color: #ffcd00;
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 10px;
      }

      .myFace::before {
         content: "";
         position: absolute;
         top: 190px;
         width: 160px;
         height: 80px;
         background: #c810dc;
         border-bottom-left-radius: 80px;
         border-bottom-right-radius: 80px;
         transition: 0.5s;
      }

      .myFace:hover::before {
         top: 210px;
         width: 150px;
         height: 20px;
         background: #c810dc;
         border-bottom-left-radius: 0px;
         border-bottom-right-radius: 0px;
      }

      .mytinyEyes {
         position: relative;
         top: -40px;
         display: flex;
      }

      .mytinyEyes .tinyEye {
         position: relative;
         width: 90px;
         height: 90px;
         display: block;
         background: #fff;
         margin: 0 15px;
         border-radius: 50%;
      }

      .mytinyEyes .tinyEye::before {
         content: "";
         position: absolute;
         top: 50%;
         left: 30px;
         transform: translate(-50%, -50%);
         width: 50px;
         height: 50px;
         background: #333;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div class="myFace">
      <div class="mytinyEyes">
         <div class="tinyEye"></div>
         <div class="tinyEye"></div>
      </div>
   </div>
   <div class="myFace">
      <div class="mytinyEyes">
         <div class="tinyEye"></div>
         <div class="tinyEye"></div>
      </div>
   </div>
   <script>
      document.querySelector("body").addEventListener("mousemove", tinyEyeball);
      function tinyEyeball() {
         var tinyEye = document.querySelectorAll(".tinyEye");
         tinyEye.forEach(function(tinyEye) {
            
            // EyeWidth & EyeHeight are variables, where EyeWidth stands for the
            // mouse's eyeWidth coordinate and EyeHeight for its height.
            let eyeWidth = tinyEye.getBoundingClientRect().left + tinyEye.clientWidth / 2;
            let eyeHeight = tinyEye.getBoundingClientRect().top + tinyEye.clientHeight / 2;
            let radian = Math.atan2(event.pageX - eyeWidth, event.pageY - eyeHeight);
            
            // Rotate is referred to as rot in a variable.
            let rot = radian * (190 / Math.PI) * -1 + 280;
            tinyEye.style.transform = "rotate(" + rot + "deg)";
         });
      }
   </script>
</body>
</html>

You will see this screen before mouse pointer comes on the face.

Next, after the mouse pointer comes on the screen, you will see this display. The eye balls rotates. It closes its mouth, smiles, and then opens it again as shown below.

Updated on: 09-Dec-2022

756 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements