Follow mouse cursor with angle

by thirdender

HTML

<div class="you"></div>

CSS

.you {
  position: absolute;
  transform-origin: center;
  border-bottom: 3px solid;
  width: 100px;
}

JavaScript

window.addEventListener('load', function() {
  var follow = document.querySelector('.you');
  var xp = 0, yp = 0;
  var mouse_x = 0; var mouse_y = 0;
  function step() {
    xp += (mouse_x - xp) / 5;
    yp += (mouse_y - yp) / 5;
    follow.style.left = xp + 'px';
    follow.style.top = yp + 'px';
    window.requestAnimationFrame(step);
  }
  window.requestAnimationFrame(step);

  function getDirection(x1, y1, x2, y2,ns) {
    var dx = x2 - x1;
    var dy = y2 - y1;
    return (Math.atan2(dx,  dy) / Math.PI * 180);
  }

  var lastx = 0;
  var lasty = 0;
  function mouse(evt){
    mouse_x = evt.pageX;
    mouse_y = evt.pageY;
    var degree=getDirection(lastx,lasty,mouse_x,mouse_y);
    lastx=mouse_x;
    lasty=mouse_y;
    follow.style.MozTransform = 'rotate('+degree+'deg)';
    follow.style.WebkitTransform = 'rotate('+degree+'deg)';
    follow.style.OTransform = 'rotate('+degree+'deg)';
    follow.style.MsTransform = 'rotate('+degree+'deg)';
    follow.style.transform = 'rotate('+degree+'deg)';
  }
  window.addEventListener('mousemove', mouse, false);
}, false);