Cursor hijacking

by Сергей Тарасевич

HTML

<div data-client="cursor" class="cursor"></div>

CSS

html, body {
  cursor: none;
}
.cursor {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAM1BMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABdXV3///+frRuHAAAAD3RSTlMAAAULEBYcIScyNz1DSFNagiHkAAAAgUlEQVQYV23QgQrDIAwE0DSNWVud6f9/7UzULmoPQXgccghbiey4tQDUy1i4+8D34yM/PnH3mZsvXH1l8xdWf2Pz5W1N39lYT/6meOyeJaufHMi3JUfli8YlMXJQ/wxL6GDEWveM+t/U6n+29PrEpS6SgmOwIF/ppIUBqcxeHvH5AWd6CRqTqhgMAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  display: none;
  position: fixed;
  height: 22px;
  width: 22px;
}

.cursor.active {
  display: block;
}

JavaScript

$(function() {

  "use strict";
  var fn = {};

  fn.d = $(document);
  fn.w = $(window);

  fn.w.on('mouseenter', function(event) {
    $('[data-client="cursor"]').addClass('active');

  }).on('mouseout', function(event) {
    $('[data-client="cursor"]').removeClass('active');

  });

  fn.d.on('mousemove', function(event) {
    fn.dH = fn.d.outerHeight();
    fn.dW = fn.d.outerWidth();

    fn.cH = event.clientY;
    fn.cW = event.clientX;

    fn.dH2 = fn.cH / (fn.dH / 100);
    fn.dW2 = fn.cW / (fn.dW / 100);

    $('[data-client="cursor"]').css({
      right: fn.dH2 + '%',
      bottom: fn.dW2 + '%'
    });

  });

});