Animated Cursor

An Animated Cursor!

by neohekate

HTML

<body>
  <h1>
    <a href="">
      Animated Cursor Code!
    </a>
  </h1>
  
  
  <div id="cursor">
    <img src="https://lh3.googleusercontent.com/proxy/9G7L_xc8WGcrilHldOtuGYtqLo_GLGCaFTTOwZFYNBWh1CvESrXJNoI79DXtaApMbwOn9N07SzNupSff3ilmIm6YwqGrLqRG4rtKV5YE1os9" />
  </div>
  
  
</body>

CSS

html {
  cursor: none;
}
body {
  background-color: white;
}
a:hover {
  cursor: none;
}
#cursor {
  position: absolute;
  z-index: 2;
}
#cursor img {
  max-width: 50px;
}

JavaScript

$(document).ready(function() {

var width = $('#cursor img').height();
var height = $('#cursor img').width();

$('#cursor').css({
       left:  -width,
       top:   -height
    }); // makes it offscreen

  $(document).on('mousemove', function(e){
    
    
    if ((e.pageX) > 10 && (e.pageY) > 10) {
    	$('#cursor').css({
         left:  e.pageX + 1,
         top:   e.pageY + 1
      });
    } else {
    	$('#cursor').css({
         left:  -width,
         top:   -height
      });
    }
	});
});