
Demo:
To create the “div/ circle that follows the cursor” follow the steps below:
- Add HTML
- Add CSS
- Add JavaScript/ jQuery
Step1.
Add HTML
<div class="circle"></div>
Step2.
Add CSS
.circle {
position: absolute;
border: solid 4px #333;
width: 65px;
height: 65px;
border-radius: 50%;
transition: .15s;
}
.circle:active {
border: solid 4px #e76f51;
}
Step3.
Add JavaScript /jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Tip: Don’t forget to add jQuery library in the <head> section!
var Y = 0, X = 0;
var moveY = 0, moveX = 0;
$(document).mousemove(function(event){
Y = event.pageY - 33;
X = event.pageX - 33;
});
setInterval(function(){
moveY += ((Y - moveY)/15);
moveX += ((X - moveX)/15);
$(".circle").css({ top: moveY +'px', left: moveX +'px'});
}, 0);
Enjoy coding!