Circle Follow Cursor

circle-follow-cursor.markdown

Circle Follow Cursor

A Pen by Paul Langton on CodePen.

License.

index.html

<span id="circle" class="circle"></span>

script.js

jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;
   
  $(document).mousemove(function(e){
    mouseX = e.pageX - 30;
    mouseY = e.pageY - 30; 
  });
    
  setInterval(function(){
    xp += ((mouseX - xp)/6);
    yp += ((mouseY - yp)/6);
    $("#circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
body, html {
	position: relative;
	height: 100%; 
	width : 100%;  
	margin: 0;
  background-color: #000000;
}

.circle {
	position: absolute;
  border: solid 1px #ccc;
	width: 60px; 
	height: 60px; 
  border-radius: 50%;  
}