ウェベン!

マウスカーソルをJSでデザインする。

パソコンでご覧の方はもうお気づきかとは思いますが、マウスカーソルをオシャレにしてみました。

カーソルをシンプルな黒ドットにしたうえで、ゆったり追従してくるストーカー(黄色の円)を加えました。
ストーカーはリンクのaタグ上に乗せると少し大きくなります。

実装方法

実装方法を簡単にまとめると、

デフォルトのマウスカーソルを非表示にする。 →
HTMLとCSSでドットを作る。 →
JSでマウスカーソルの位置に合わせ移動させる。

の3STEPです。

コード

01. デフォルトのマウスカーソルを非表示にする

▼ CSS

html,body,a{
    cursor: none;
}

これは単純。CSSでカーソルを非表示にします。

cursor – CSS: カスケーディングスタイルシート | MDN

02. HTMLとCSSでドットを作る

▼ HTML

<body>
    <div id="cursor"></div>
    <div id="stalker"></div>

まずは「マウスカーソル用」と「追従するストーカー用」に2つ、空のdivタグを作っておきます。
<body></body>の直下であればどこでも構いませんが、頭かお尻が分かりやすいです。

▼ CSS

#cursor{
    pointer-events: none;
    position: fixed;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 1.0);
    transform: translate(-100px,-100px);
    border-radius: 50%;
    z-index: 999;
}
#stalker {
    pointer-events: none;
    position: fixed;
    top: -16px;
    left: -16px;
    width: 32px;
    height: 32px;
    background: rgba(253, 254, 0, 0.8);
    border-radius: 50%;
    transform: translate(-100px,-100px);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 998;
}

マウスカーソルは8pxの円、ストーカーは32pxの円。あとでマウスの位置に合わせるためにposition:fixedをつけています。
初期状態で画面外に置いておきたいのでtranslateをマイナスに設定。

ストーカーはほんの少し動きを遅らせたいので、transitionで遅らせます。

03. JSでマウスカーソルの位置に合わせ移動させる

▼ JavaScript

<script>
    let cursorR = 4;  //カーソルの半径
    const cursor = document.getElementById('cursor');  //カーソル用のdivを取得
    const stalker = document.getElementById('stalker'); //ストーカー用のdivを取得

    //マウスに追従させる処理
    document.addEventListener('mousemove', function (e) {
        stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
        cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
    });

    //aタグにホバー中かどうかの判別フラグ
    let hovFlag = false;

    //aタグにホバーしたときに、ストーカーにクラスを追加
    const linkElem = document.querySelectorAll('a');
    for (let i = 0; i < linkElem.length; i++) {
        //マウスホバー時
        linkElem[i].addEventListener('mouseover', function (e) {
            hovFlag = true;

            //ストーカーにクラスを追加
            stalker.classList.add('hov_');
        });
        //マウスホバー解除時
        linkElem[i].addEventListener('mouseout', function (e) {
            hovFlag = false;
            stalker.classList.remove('hov_');
        });
    }
</script>

ポインタの位置を調べて、その座標でtranslateの値を書き換えることでマウスの動きに合わせています。

12行目からはホバー時に動きをつけるために、aタグにホバーしたときストーカーに「hov_」というクラスを追加するようにしています。

▼ CSS

#stalker.hov_{
    top: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    transition: .15s;
    background: rgba(253, 254, 0, 0.5);
}

そのうえで、マウスホバー時のCSSを追記。
大きさを大きくして透明度を上げました。

まとめ

コードをまとめますと、

▼ HTML

<body>
    <div id="cursor"></div>
    <div id="stalker"></div>

▼ CSS

html,body,a{
    cursor: none;
}
#cursor{
    pointer-events: none;
    position: fixed;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 1.0);
    transform: translate(-100px,-100px);
    border-radius: 50%;
    z-index: 999;
}
#stalker {
    pointer-events: none;
    position: fixed;
    top: -16px;
    left: -16px;
    width: 32px;
    height: 32px;
    background: rgba(253, 254, 0, 0.8);
    border-radius: 50%;
    transform: translate(-100px,-100px);
    transition: transform 0.2s;
    transition-timing-function: ease-out;
    z-index: 998;
}
@media screen and (max-width:768px){
    #cursor, #stalker {
        display: none;
    }
}
#stalker.hov_{
    top: -40px;
    left: -40px;
    width: 80px;
    height: 80px;
    transition: .15s;
    background: rgba(253, 254, 0, 0.5);
}

▼ JavaScript

<script>
    let cursorR = 4;  //カーソルの半径
    const cursor = document.getElementById('cursor');  //カーソル用のdivを取得
    const stalker = document.getElementById('stalker'); //ストーカー用のdivを取得

    //マウスに追従させる処理
    document.addEventListener('mousemove', function (e) {
        stalker.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
        cursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
    });

    //aタグにホバー中かどうかの判別フラグ
    let hovFlag = false;

    //aタグにホバーしたときに、ストーカーにクラスを追加
    const linkElem = document.querySelectorAll('a');
    for (let i = 0; i < linkElem.length; i++) {
        //マウスホバー時
        linkElem[i].addEventListener('mouseover', function (e) {
            hovFlag = true;

            //ストーカーにクラスを追加
            stalker.classList.add('hov_');
        });
        //マウスホバー解除時
        linkElem[i].addEventListener('mouseout', function (e) {
            hovFlag = false;
            stalker.classList.remove('hov_');
        });
    }
</script>

こうなります。

CSSで、スマホとタブレットのときは非表示にする記述も追記しています。

ホバー時にさりげなくアニメーションつけても面白そう。

参考:JavaScriptでマウスカーソルを小さいドットに変更する方法【jQueryなし】