もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

cssとjsで実装するマウスストーカーの制作忘備録です。
Flashの頃からあるギミックですが、クライアントのサイトに必要ということで実装しました。
ギミックとしてだけでなく、スカーソルの見失い防止やリンクの強調などにも役立ちます。

css
#chaser { width: 24px; height: 24px; border-radius: 50%; background: rgba(230,30,30,0.7); mix-blend-mode: normal; pointer-events: none; position: fixed; left: 0; top: 0; z-index: 3; transition: width .25s ease, height .25s ease;}
#chaser.is-hover { width: 52px; height: 52px; background: #fff; mix-blend-mode: difference;}

js
$(function () {
  const $chaser = $('#chaser');

  let mouseX = 100, mouseY = 100;
  let posX = 100, posY = 100;
  let size = 24;

  $(document).on('mousemove', function (e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  $(document).on('mouseenter', 'a[href]', function () {
    $chaser.addClass('is-hover');
    size = 52;
  }).on('mouseleave', 'a[href]', function () {
    $chaser.removeClass('is-hover');
    size = 24;
  });

  function animate() {
    posX += (mouseX - posX) * 0.15;
    posY += (mouseY - posY) * 0.15;

    $chaser.css({
      transform: `translate(${posX - size / 2}px, ${posY - size / 2}px)`
    });

    requestAnimationFrame(animate);
  }
  animate();
});

html
<div id="chaser"></div>

親要素の背景色の指定がない場合、色の差の絶対値が取れません。
背景色の指定をするか、bodyの背景色を指定したうえで、親要素の背景色をinheritと指定してください。