Moves the circle to the cursor position on mouse movement
A Pen by Rakesh Nayak on CodePen.
<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> |
Moves the circle to the cursor position on mouse movement
A Pen by Rakesh Nayak on CodePen.
$(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)"); | |
}); |
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> |
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; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |