Tag: mousemove

Categories
Web development

Div (circle) follows the cursor

Div follows the cursor

Demo:

*to see the “circle follows the cursor” on the website click here.

To create the “div/ circle that follows the cursor” follow the steps below:

  1. Add HTML
  2. Add CSS
  3. 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!