<div id="stalker"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
#stalker{
position: fixed;
width: 10px;
height: 10px;
margin: -30px 0 0 -30px;
z-index: 998;
pointer-events: none;
background-color: #000;
border-radius: 30px;
background-clip: padding-box;
border: solid 15px rgba(221, 221, 221, .5);
}
#stalker.active{
background-color: #000;
}
$(function(){
var cursor=$("#cursor");
var stalker=$("#stalker");
$(document).on("mousemove",function(e){
var x=e.clientX;
var y=e.clientY;
cursor.css({
"opacity":"1",
"top":y+"px",
"left":x+"px"
});
setTimeout(function(){
stalker.css({
"opacity":"1",
"transform":"translate("+x+"px,"+y+"px)"
});
},100);
});
$("a").on({
"mouseenter": function() {
cursor.addClass("active");
stalker.addClass("active");
},
"mouseleave": function() {
cursor.removeClass("active");
stalker.removeClass("active");
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.