独自のマウスカーソルを作成してウェブページを魅力的に!

ユーザーエクスペリエンスを向上させるために、ウェブサイトに独自の
マウスカーソルを導入する方法を紹介します。
本記事では、カーソルがマウスに追従する動きや、
リンクにホバーした際に見た目が変化する効果を実装する手順を詳しく解説します。

実装例

以下のコードでは、HTML、CSS、JavaScriptを使って独自のカーソルを作成します。

HTMLコード

まず、カーソルの基本となる要素とボタンリンクを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Cursor with Hover Effects</title>
    <style>
        /* Custom mouse pointer */
        .sample-cursor {
            position: fixed;
            top: -5px;
            left: -5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
            transform: translate(0, 0);
            pointer-events: none;
        }

        /* Changes appearance when hovering over a link */
        .sample-cursor.sample-cursor--hover {
            top: -20px;
            left: -20px;
            width: 40px;
            height: 40px;
            background: rgba(205, 114, 113, 0.5);
        }

        /* Button styling for demonstration */
        .sample-btn {
            display: inline-block;
            min-width: 300px;
            margin: 20px;
            padding: 20px;
            color: #fff;
            background-color: #000;
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
        }
    </style>
</head>
<body>

    <div id="sampleCursor" class="sample-cursor"></div>

    <a href="#" class="sample-btn">Sample Link</a>

    <script>
        // Get the div for the cursor
        var sampleCursor = document.getElementById('sampleCursor'); 

        // Make the div follow the mouse movement
        document.addEventListener('mousemove', function (e) {
            sampleCursor.style.transform = 'translate(' + e.clientX + 'px, ' + e.clientY + 'px)';
        });

        // Add hover effect when hovering over links
        var sampleLinks = document.querySelectorAll('a');
        for (var i = 0; i < sampleLinks.length; i++) {
            sampleLinks[i].addEventListener('mouseover', function () {
                sampleCursor.classList.add('sample-cursor--hover');
            });
            sampleLinks[i].addEventListener('mouseout', function () {
                sampleCursor.classList.remove('sample-cursor--hover');   
            });
        }
    </script>
</body>
</html>

コードの解説

HTML構成

<div id="sampleCursor">:カーソルの動きに追従する要素。

<a href="#" class="sample-btn">:ホバー時のカーソル効果を確認するためのボタンリンク。

CSSスタイル

.sample-cursor
固定位置でマウスに追従するカーソル。
背景色、サイズ、位置のアニメーション効果を定義。

.sample-cursor--hover
リンクホバー時の拡大効果を追加。

JavaScriptの動作

マウスの追従mousemove イベントでカーソル位置を更新。
transform: translate() を利用して滑らかに移動。

ホバー時の効果
mouseover イベントで .sample-cursor--hover クラスを追加。
mouseout イベントでクラスを削除し、元のサイズに戻す。

カスタマイズのポイント

カーソルの色やサイズを変更するには、.sample-cursorbackgroundwidth を編集。
ホバー時のエフェクトをアレンジする場合は、.sample-cursor--hover のスタイルを調整。

まとめ

独自のカーソルを実装することで、ウェブサイトのデザイン性とユーザーエクスペリエンスを
大幅に向上させることができます。
本記事で紹介したコードを元に、自分のサイトに合ったカスタマイズを加えてみてください。
簡単な変更でもデザインに大きなインパクトを与えることができます。
ぜひ挑戦して、ウェブサイトをさらに魅力的にしてください!