[JavaScript] オリジナルのマウスカーソルを実装する

マウスカーソルのポインターをカスタマイズしてリンクにホバーするとポヨンと変形するようなもの。クールなサイトでたまに見かけますね。

あれ超かっこいいのでマネしましょう。少しの CSS と JavaScript で実装できます。

サンプル

html

<body>
  <a href="#">リンク</a>

  <div class="cursor">
    <div class="cursor__inner"></div>
  </div>  
</body>

css

body {
  cursor: none;
}

a {
  cursor: inherit;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; /* いちばん上に来るように大きめの値を指定 */
  pointer-events: none;
}

/* ▽▽▽ここから下の部分はサイトにあわせてスタイルを調整してください▽▽▽ */
.cursor__inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff0000;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  transition: 
    background 0.2s linear,
    transform 0.4s ease-out;
}

.cursor.is-hovering .cursor__inner {
  background: #0000ff;
  transform: translate(-50%, -50%) scale(1.5);
}

javascript

document.addEventListener('DOMContentLoaded', function() {
  // カーソル要素を取得
  var cursor = document.querySelector('.cursor')

  // すべてのリンク要素を取得
  var links = document.querySelectorAll('a')

  // カーソル要素をマウス位置に追従させる
  document.addEventListener('mousemove', function(e) {
    var x = e.pageX - window.pageXOffset
    var y = e.pageY - window.pageYOffset

    cursor.style.transform = 'translate(' + x + 'px,' + y + 'px)'
  })

  // リンク要素のマウスが乗ったとき/外れたときのイベントハンドラを登録する
  Array.prototype.forEach.call(links, function(link) {
    // マウスが乗ったとき
    // カーソル要素に .is-hovering をつける
    link.addEventListener('mouseenter', function() {
      cursor.classList.add('is-hovering')
    })

    // マウスが外れたとき
    // カーソル要素から .is-hovering を外す
    link.addEventListener('mouseleave', function() {
      cursor.classList.remove('is-hovering')
    })
  })
})

ものすごく簡単に言ってしまえば「デフォルトのカーソルを cursor: none; で隠してカーソル要素をマウスの位置に追従させてaタグに乗ったとき/外れたときでクラスを切り替える」だけです。

だいたいこんな感じでいいと思います。