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:
- Scroll To Top Button With Progress Bar
- Rainbow Border Animation | HTML and CSS
- Predictive Text On Input Fields | HTML, CSS and Javascript
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!
