HomeCSSDiv Follows Mouse Cursor | HTML, CSS & Javascript

Div Follows Mouse Cursor | HTML, CSS & Javascript

Hello everyone. Welcome to today’s tutorial. Today’s tutorial is going to be a fun and exciting one. In this tutorial, we will learn how to create a div that follows the mouse cursor.
 
To create this project, we need HTML, CSS and Javascript. This project is perfect for javascript intermediates. I have a playlist that contains over 50+ javascript projects. You can check them out here. It consists of a variety of tutorials ranging from beginner-friendly to quite advanced ones.

Video Tutorial:

If you like to code along to a video tutorial rather than reading the blog post, you can check out the video tutorial here down below. Also, subscribe to my youtube channel to stay updated with exciting tips, tricks and tutorials.

Project Folder Structure:

First, we create a project folder structure. The project folder is called ‘Div Follows Mouse’. Inside this folder, we have three files – index.html, style.css and script.js. The first file is the HTML document, the second is the stylesheet, and the last one is the script file.

HTML:

We start with the HTML code. First, copy the code below and paste it into your HTML document.

The HTML code only consits of a div with unique id – ‘my-div’.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Div Follows Mouse Cursor</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="my-div"></div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style this div a bit using CSS. For this, copy the code below and paste it into your stylesheet.

We remove the paddings and margins from the body. Next, we add a background to the body. Here I am using a background gradient. You can use any colour or gradient of your choice. Also, we set the overflow for the body to be hidden.

Other Tutorial You Might Like:

In the next step, we style the div. We set the dimensions of the div as 6em x 6em. To make it circular, we add a border radius of 50%.

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #8fc7f1, #7173f5);
  overflow: hidden;
}
#my-div {
  width: 6em;
  height: 6em;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(16, 0, 54, 0.2);
  transition: 0.1s ease-out;
}

Javascript:

Finally, we need to add functionality to this code. For this copy, the code provided below and paste it into your script file. I have added comments for each step to explain the code.

let myDiv = document.getElementById("my-div");
//Detect touch device
function isTouchDevice() {
  try {
    //We try to create TouchEvent. It would fail for desktops and throw error
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

const move = (e) => {
  //Try, catch to avoid any errors for touch screens (Error thrown when user doesn't move his finger)
  try {
    //PageX and PageY return the position of client's cursor from top left of screen
    var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
    var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
  } catch (e) {}
  //set left and top of div based on mouse position
  myDiv.style.left = x - 50 + "px";
  myDiv.style.top = y - 50 + "px";
};
//For mouse
document.addEventListener("mousemove", (e) => {
  move(e);
});
//For touch
document.addEventListener("touchmove", (e) => {
  move(e);
});

Our project is now ready. If you face any difficulties while creating this code, you can download the source code by clicking on the download button below. Also, if you have any queries, suggestions, or feedback comment on them below.

See you again with another exciting tutorial soon. Happy Coding!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

5 × one =

Most Popular