Cursor Trail

Gradually follows the cursor around the page

HTML

<div id="container">

    <div class="circleBase roundCursor" id="cube"></div>

</div>

CSS

body { overflow:hidden; position:absolute; height:100%; width:100%; background:#efefef; }

#cube {
  height:18px;
  width:18px;
  margin-top:-9px;
  margin-left:-9px;
  background:red;
  position:absolute;
  top:50%;
  left:50%;   
}
.circleBase {
    border-radius: 50%;
}
.roundCursor {
    width: 20px;
    height: 20px;
    background: red;
    border: 0px solid #000;
}

JavaScript

$(document).ready(function () {

  $("body").mousemove(function (e) {
    mouseMoveHandler(e);
  });
  var currentMousePos = { x: -1, y: -1 };
  function mouseMoveHandler(event) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
  }

  mouseMover = setInterval(positionUpdate, 15);

  function positionUpdate() {

    var x_cursor = currentMousePos.x;
    var y_cursor = currentMousePos.y;
    var position = $("#cube").offset();
    var x_box = position.left;
    var y_box = position.top;

    $("#cube").animate({
      left: x_box+0.1*(x_cursor-x_box),
      top: y_box+0.1*(y_cursor-y_box) 
    }, 1, "linear"); 
  }
});