Move Div On Cursor Position In jQuery

Other
Demo    Download
File Size: 0.83 KB
Views Total: 226 views
Last Update:November 10, 2020
Publish Date: November 10, 2020
Official Website: Go to website
License: MIT

Move Div on cursor position follow with mouse is a small javaScript. It makes any element follow your mouse inside a specific page, with a smooth animation.

How to used :

1. Add a class to your figure element with the name of the div:

<div class="box">
  <div class="circle"></civ>
</div>

2. Add CSS :

<style type="text/css">
body{
  margin:0px;
  padding:0px;
  font-family: 'Roboto', sans-serif;
}
.box{
  width:100%;
  height:500px;
  background:#eaeaea;
  position:relative;
  overflow:hidden;
  cursor:crosshair;
}

.circle{
  background:#f00;
  width:120px;
  height:120px;
  border-radius:50%;
  position:absolute;
  
  transform:translate3d(-50%,-50%,0);
  transition:transform 0.2s cubic-bezier(.02,1.23,.79,1.08);
}


h1 {
	position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
</style>

3. Add jQuery Script :

<script type="text/javascript">
$(document).on("click mousemove",".box",function(e){ 
var x = e.clientX;
var y = e.clientY;
var newposX = x - 60;
var newposY = y - 60; $(".circle").css("transform","translate3d("+newposX+"px,"+newposY+"px,0px)");
});

</script>

Done


Nola Arney

Nola Arney is a full stack web developer who has worked at companies of various shapes and sizes, and with technologies just as diverse. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.

Related jQuery Plugins