マウスの動きに追従する「マウスストーカー」のシンプルな作り方

ここ何年かよく見かけるマウスストーカーの作り方のメモです。
特にプラグインは使わずに、CSSと生のJavaScriptだけでさくっと作ります。

簡単な作り方

HTMLは特に特殊な記述はないです。あえて言うならDOMの入れ子構造に気をつけるくらいでしょうか。
あとは必要な表現に応じてSVGや画像を入れれば良いです。

<div id="stalker" class="stalker"></div>

CSSの考え方としてはposition:fixed;で配置。座標は後でJavaScriptでマウスに追従させるという感じです。ちなみにpointer-eventsを記述し忘れるとマウスイベントがうまく使えなくなったりします。

.stalker{
  position:fixed;
  z-index: 10; /* 一番上のレイヤーに */
  pointer-events:none; /* マウスイベントの邪魔にならないように */
  width: 30px;
  height: 30px;
  border-radius:50%;
  background:#fff;
  /* ストーカーDOMの中心をマウス座標に */
  top:-15px;
  left:-15px;
  /* DOMを滑らかに追従させる為に */
  transition: transform 0.2s ease-out;
}

Javascriptの方の考え方はマウスムーブイベントを設定し、ストーカーDOMにマウス座標をDOM座標に常時反映していきます。

const stalker = document.getElementById('stalker');
document.addEventListener('mousemove', function (event) {
  stalker.style.transform = 'translate3d(' + event.clientX + 'px, ' + event.clientY + 'px,0)';
});

これだけの記述でマウスの動きにくっついてくるDOM要素が出来上がります。
ちなみにマウスストーカーに対してhover時の動きを設定するには「対象DOMのhover時にマウスストーカーにclassを追加する」といった記述が必要になります。

あとはサイトのデザインに合わせて適宜見た目を作り込めば良いかと。

JavaScript コードレシピ集

”javascript”タグの他の記事を見る