JS: the follower

I remembered that in the early 1990s and 2000s, the face chasing the mouse pointer was fashionable on the internet. There was various examples in SWF format.

This is a my fast implementation in javascript.
    1 <!DOCTYPE html>
    2 <html>
    3     <head>
    4         <meta charset="utf-8">
    5         <title>Follower</title>
    6         <style>
    7             .follower {
    8                 position: relative;
    9                 width: 20em;
   10                 height: 20em;
   11                 border-radius: 50%;
   12                 background-color: #a0a050;
   13                 display: flex;
   14                 justify-content: center;
   15                 align-items: center;
   16             }
   17             .eyes {
   18                 display: flex;
   19                 position: absolute;
   20                 top: 25%;
   21             }
   22             .eyeback {
   23                 position: relative;
   24                 display: flex;
   25                 width: 4em;
   26                 height: 4em;
   27                 background-color: white;
   28                 border-radius: 50%;
   29             }
   30             .eye {
   31                 position: absolute;
   32                 width: 2em;
   33                 height: 2em;
   34                 background-color: black;
   35                 border-radius: 50%;
   36             }
   37             .eye1 {
   38                 top: -60%;
   39                 left: -30%;
   40             }
   41             .eye2 {
   42                 top: -50%;
   43                 left: 30%;
   44             }
   45         </style>
   46     </head>
   47     <body>
   48         <div class="follower">
   49             <div class="eyes">
   50                 <div class="eyeback eye1">
   51                     <div class="eye"></div>
   52                 </div>
   53                 <div class="eyeback eye2">
   54                     <div class="eye"></div>
   55                 </div>
   56             </div>
   57         </div>
   58         <script>
   59             function eyesfollow(event) {
   60                 const eye = document.querySelectorAll(".eye");
   61                 eye.forEach(function (vareye) {
   62                     let rect = vareye.getBoundingClientRect();
   63 
   64                     let x = event.clientX - rect.x;
   65                     let y = event.clientY - rect.y;
   66                     if (x > 30)
   67                         x = 30;
   68                     else if (x < 0)
   69                         x = 0;
   70                     if (y > 30)
   71                         y = 30;
   72                     else if (y < 0)
   73                         y = 0;
   74 
   75                     vareye.style.position = "relative";
   76                     vareye.style.left = x + "px";
   77                     vareye.style.top = y + "px";
   78                 });
   79             }
   80             document.body.addEventListener("mousemove", eyesfollow);
   81         </script>
   82     </body>
   83 </html>
2023
Dec, 29