JavaScriptでマウス追従のエフェクトを実装する方法

マウスの動きに応じて、特定の要素やエフェクトが追従するデザインは、ユーザーの注目を引きつけるのに効果的です。この記事では、JavaScriptを使用してマウス追従の基本的な実装方法を解説します。

基本例

基本的なマウス追従の実装

まずは、シンプルにマウスの座標を取得し、その位置に要素を移動させる基本的な例を見てみましょう。

<div class="follower"></div>

    const follower = document.querySelector('.follower');

    document.addEventListener('mousemove', (e) => {
        let x = e.clientX;
        let y = e.clientY;

        follower.style.left = `${x}px`;
        follower.style.top = `${y}px`;
    });

アニメーションを追加

追従の動きにスムーズさを加えるために、CSSのtransitionを利用します。

.follower {
    transition: left 0.2s, top 0.2s;
}

これにより、要素がマウスの動きに徐々に追従するアニメーションが追加されます。

追従の遅延やカスタムエフェクト

更に進んで、遅延やカスタムエフェクトを追加することも可能です。例えば、マウスの速度に応じて追従の速度を変更するなど、様々なカスタマイズが考えられます。

このサンプルでは、赤い円がマウスのカーソルを追跡するようになっています。

.follower {
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: left 0.2s ease, top 0.2s ease;
}

注意事項

マウス追従エフェクトは、過度に使用するとユーザビリティを低下させる可能性があります。ユーザーの経験を考慮して、適切な場面でのみ使用してください。

まとめ

マウス追従エフェクトは、通常、JavaScriptを使用して実装されます。なぜなら、マウスのリアルタイムな位置をキャッチし、その位置に基づいてページ上の何らかの要素を更新する必要があるからです。純粋なCSSだけでは、マウスのリアルタイムな位置を知ることも、リアルタイムなマウスの動きに反応することもできません。