Move div to the cursor position on cursor move

index.html

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

<p>Created with <i class="fa fa-heart"></i> by <a href="https://codepen.io/rakeshnayak/" target="_blank">Rakesh Nayak</a></p> 

move-div-to-the-cursor-position-on-cursor-move.markdown

Move div to the cursor position on cursor move

Moves the circle to the cursor position on mouse movement

A Pen by Rakesh Nayak on CodePen.

License.

script.js

$(document).on("click mousemove","body",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)");
});

scripts

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

style.css

body{
  margin:0px;
  padding:0px;
  font-family: 'Roboto', sans-serif;\
  position: relative;
  height: 100vh;
}

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

p{
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

i{
  color:#f00;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />