How To Create Minion Eyes That Follows Mouse Cursor

Hello Everyone, In today’s tutorial, we will learn how to create minion eyes that follow your mouse cursor.

To create this project we need HTML, CSS and Javascript. This project is best suitable for javascript intermediates. Javascript beginners might feel this project is a bit tricky and easy.

Access Our :  Free Online Tools

In this project, we create minion eyes using html, CSS & JavaScript. And to make the eyes follow the mouse, we make use of javascript.

Table of Contents

HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Minion Eyes Follow Mouse</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="eyes-wrapper">
        <div class="eye">
          <div class="eyeball"></div>
        </div>
        <div class="eye">
          <div class="eyeball"></div>
        </div>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS


body {
  padding: 0;
  margin: 0;
  background-color: #f5d60e;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 4em;
  background-color: #231f1e;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: -1;
}
.eyes-wrapper {
  display: flex;
}
.eyes-wrapper:before {
  content: "";
  position: absolute;
  width: 26em;
  height: 6em;
  background-color: #a8a7ac;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.eye {
  width: 10em;
  height: 10em;
  border: 15px solid #a6a4ad;
  background-color: #ffffff;
  border-radius: 50%;
}
.eyeball {
  height: 3.2em;
  width: 3.2em;
  background: radial-gradient(#271e1e 35%, #935a29 37%);
  border-radius: 50%;
  margin: 0.2em 3.5em;
  position: relative;
}
.eyeball:before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  height: 0.7em;
  width: 0.5em;
  border-radius: 50%;
  top: 13px;
  left: 13px;
  transform: rotate(45deg);
}

JAVASCRIPT

To add follow cursor functionality to these eyes, we have to use javascript. Now again, copy the javascript code that is provided below and paste it into your script.js file.


//Selecting the eye div
let eye_ref = document.querySelectorAll(".eye");

//mousemove for devices with mouse aand touchmove for touchcreen devices
let events = ["mousemove", "touchmove"];

//Check for touch screen
function isTouchDevice() {
  try {
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

//Same function for both events
events.forEach((eventType) => {
  document.body.addEventListener(eventType, (event) => {
    eye_ref.forEach((eye) => {
      /* getBoundingClientRect() method returns the position relative to the viewport */
      let eyeX = eye.getBoundingClientRect().left + eye.clientWidth / 2;
      let eyeY = eye.getBoundingClientRect().top + eye.clientHeight / 2;

      /* ClientX and ClientY return the position of clients cursor from top left of the screen*/
      var x = !isTouchDevice() ? event.clientX : event.touches[0].clientX;
      var y = !isTouchDevice() ? event.clientY : event.touches[0].clientY;

      /* 
    Subtract x position of mouse from x position of eye and y position of mouse from y position of eye.
    Use atan2(returns angle in radians)
    */

      let radian = Math.atan2(x - eyeX, y - eyeY);
      //Convert Radians to Degrees
      let rotationDegrees = radian * (180 / Math.PI) * -1 + 180;
      //Rotate the eye
      eye.style.transform = "rotate(" + rotationDegrees + "deg)";
    });
  });
});

Also Read : How To Create Superman Mode Minion Using HTML, CSS & JavaScript

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of minion eyes directly on your computer.

Final Word

In this way, we can create minion eyes using html, css & JavaScriptI hope you all like this tutorial. Keep with us for next tutorial. if you wann the source code of this code you can get this on our github account. If you have any query please free to contact us Or comment below.

This is the best and simple project for JavaScript beginner. Every JavaScript beginner use this project for their projects. also we have created HTML course for beginners for absolutely free. This html course is a free tutorial library for every programmer. You can share this with your friends. Thank you !

How To Create Minion Eyes That Follows Mouse Cursor

Published on 02-Jan-2022 13:49:29

You may also like this!