Want to add an engaging, interactive effect to your website? Learn how to create an Interactive Div That Follows Your Mouse Cursor. A div that follows your mouse cursor can be a fun and visually appealing feature to include. It’s a great way to learn how to work with JavaScript events, particularly mousemove and touchmove, while mastering CSS positioning.
In this tutorial, we’ll create a circular div that smoothly follows the mouse pointer as it moves across the screen. The feature is touch-friendly too, so it works seamlessly on mobile devices. Watch similar tutorial here.
What You Will Learn:
- How to use the
mousemoveandtouchmoveevents in JavaScript. - Detecting whether a device is touch-enabled.
- Dynamically updating the position of an element using CSS
style. - Using CSS transitions for smooth animations.
Youtube Video:
To make this project even easier, I’ve created a video tutorial where I guide you step-by-step through building this interactive feature. In the video, I’ll explain:
-
- Writing the HTML, CSS, and JavaScript code.
- Debugging and testing on both desktop and mobile devices.
- Enhancing the effect with additional features like animations.
HTML
The HTML structure is very simple, consisting of a single div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Div Follows Mouse Cursor</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="my-div"></div>
<script src="script.js"></script>
</body>
</html>
CSS
The CSS styles the div to look like a smooth circle that follows the cursor.
body {
padding: 0;
margin: 0;
overflow: hidden;
}
#my-div {
width: 6em;
height: 6em;
background-color: #34a0fb;
position: absolute;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: 0.1s ease-out;
}
- The
position: absolute;ensures the div can move freely within the document. transform: translate(-50%, -50%)centers the div around the cursor.-
transition: 0.1s ease-out;adds a smooth animation effect when the div follows the mouse
JavaScript
The JavaScript handles the movement of the div, responding to both mouse and touch inputs.
let myDiv = document.getElementById("my-div"); function istouchDevice() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } const move = (e) => { try { var x = !istouchDevice() ? e.pageX : e.touches[0].pageX; var y = !istouchDevice() ? e.pageY : e.touches[0].pageY; } catch (e) {} myDiv.style.left = x - 50 + "px"; myDiv.style.top = y - 50 + "px"; }; document.addEventListener("mousemove", (e) => { move(e); }); document.addEventListener("touchmove", (e) => { move(e); });How It Works
- Detecting Mouse or Touch Devices
- The
istouchDevicefunction determines whether the device supports touch events. If it does, the touch coordinates are used.
- The
- Tracking Movement
mousemovecaptures the cursor’s position on non-touch devices.touchmovecaptures touch coordinates for mobile devices.- The
movefunction calculates the new position of the div and updates itsleftandtopstyles dynamically.
- Centering the Div
transform: translate(-50%, -50%)ensures that the div’s center aligns with the cursor or touch point.
- Smooth Animations
- The CSS
transitionproperty creates a smooth trailing effect, making the movement visually appealing.
- The CSS
Live Demo Ideas
Here are some creative ideas to extend this functionality:
- Custom Cursor: Replace the default browser cursor with the moving div.
- Dynamic Colors: Change the background color of the div based on its position.
- Add Text or Icons: Display text or an icon inside the div to make it more interactive.
- Detecting Mouse or Touch Devices
Conclusion
This simple project is an excellent way to practice JavaScript and CSS while adding a dynamic, interactive element to your web pages. Whether you use it as a standalone feature or as part of a larger project, it’s sure to grab your audience’s attention.
Start coding today, and don’t forget to check out the video tutorial for detailed guidance!
