マウスストーカーをPure JavaScriptで実装する

結果

See the Pen Cool UI - Mouse Chaser 01 by Loki (@loki__codepen) on CodePen.

追従するマウスカーソルについて

ここ最近、マウスカーソルに装飾をするサイトが増えてきている気がします。
自作するのは面倒なので、多くの制作者は以下のサイトのコードをコピーすることも多いでしょう。

イケてるマウスカーソルを簡単に実装する | 株式会社 エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/mouse-stoker-gsap/

jQueryを利用して書かれています。
Webサイトの制作であればjQueryを利用しない機会はあまりないと思いますが、記述をPure JavaScriptに調整したものを作成しましたので、共有いたします。

ソースコード

const 
  cursor = document.getElementById('js-cursor'),
  chaser = document.getElementById('js-chaser'),
  target = document.querySelector('a');
let
    delay = 10,
    cursorPosX = 0,
    cursorPosY = 0,
    chaserPosX = 0,
    chaserPosY = 0;

// カーソルの遅延アニメーション
TweenMax.to({}, .001, {
    repeat: -1,
    onRepeat: function() {
        chaserPosX += (cursorPosX - chaserPosX) / delay;
        chaserPosY += (cursorPosY - chaserPosY) / delay;
        
        TweenMax.set(cursor, {
            css: {
                left: cursorPosX - (cursor.clientWidth / 2),
                top: cursorPosY - (cursor.clientWidth / 2)
            }
        });

        TweenMax.set(chaser, {
            css: {
                left: chaserPosX - (chaser.clientWidth / 2),
                top: chaserPosY - (chaser.clientWidth / 2)
            }
        });
    }
});

// マウス座標を取得
document.onmousemove = function(event) {
    cursorPosX = event.pageX;
    cursorPosY = event.pageY;
};

// マウスオーバー時の処理
target.onmouseover = function() {
    cursor.classList.add('is-active');
    chaser.classList.add('is-active');
};

// マウスアウト時の処理
target.onmouseout = function() {
    cursor.classList.remove('is-active');
    chaser.classList.remove('is-active');
};

その他に調整した点

以下の点を修正しております。

• セレクタ名を.cursorから#js-cursorに変更
• セレクタ名を.followerから#js-chaserに変更
• cWidth やfWidthなど、JavaScript側でもサイズを入力する必要があった値を、CSSのみで認識するように変更

さいごに

マウスカーソルの視認性が良くなるので、個人的には好きな実装です！
十数年前の流行りが回帰していますが、アニメーション系のライブラリと合わさって現代バージョンとして流行っていることがなんだか面白いですね。
やりすぎには注意（笑）

---

Twitterのフォロワーを募集しております！
すでにWeb業界にいらっしゃる方や、業界未経験の方、どんな方でも募集しておりますので、どうぞよろしくお願いいたします(*^^*)

Twitter - https://twitter.com/hiroki_web