Introduction
In this article, we'll learn how to create a simple yet engaging effect where a circle follows the mouse cursor on a web page. This effect can be used to add interactivity and visual appeal to your website. We'll achieve this using HTML, CSS, and JavaScript.
Step 1: Setting Up the basic HTML Structure
<title>Random HTML Content</title>
<body>
<div id="circleId" class="circle"></div>
<h1>Random HTML Content</h1>
<div class="random">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum magna id quam mollis, eu porttitor dolor hendrerit. Curabitur vestibulum, neque id molestie blandit, nisl orci hendrerit ligula, et tristique risus odio nec metus. Nulla facilisi.</p>
<p>Phasellus eget mi vel mauris luctus lacinia. Donec eget interdum eros. Fusce in est enim. Vivamus et enim vehicula, ultricies felis sit amet, bibendum nunc. Donec eget tristique mi.</p>
<p>Suspendisse potenti. Nulla facilisi. Vivamus eu justo vel odio faucibus facilisis. Morbi tempus arcu sit amet libero rutrum dictum. Nam id justo sed felis auctor lacinia. Sed nec mauris nec tellus scelerisque interdum.</p>
<p>Nunc dignissim lorem ac libero rutrum, a fermentum arcu convallis. Nullam sed justo in ligula iaculis ultrices. Suspendisse luctus justo eget arcu dapibus, et blandit libero ultricies. In vulputate leo vel elit ultricies ultricies.</p>
</div>
</body>
Step 2: Styling the Circle with CSS
Now, let's style our circle to make it visually appealing.
.circle {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #007bff;
pointer-events: none;
}
Explanation
- We position the circle in the center of the viewport using absolute positioning and
transform: translate(-50%, -50%) - The circle has a width and height of 50 pixels and a
border-radiusof50%to make it round. - We set pointer-events: none; to ensure that the circle does not interfere with mouse interactions with other elements.
Step 3: Adding JavaScript Functionality
Next, let's add JavaScript code to make the circle follow the mouse cursor.
const circle = document.getElementById('circle');
document.addEventListener('mousemove', (e) => {
circle.style.left = `${e.clientX}px`;
circle.style.top = `${e.clientY}px`;
});
Explanation:
We select the circle element using its ID circle.
We add a mousemove event listener to the document.
Inside the event listener, we update the left and top CSS properties of the circle element to match the current mouse cursor position.
Another tip:
To hide your cursor completely add this line to the circle class.
cursor: none;
Conclusion:
Congratulations! You've successfully created an animated circle that follows the mouse cursor. You can further customize the appearance and behaviour of the circle to fit your project's requirements. Experiment with different sizes, colors, and animation effects to make it unique!
Here's a codepen link to see it in action:
https://codepen.io/Sridhar-Murali/pen/poBrBEM
Top comments (0)