こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトのデザインを強化するために、マウスカーソルにテキストを追従させるエフェクトを追加しませんか？
今回紹介する方法では、カーソルが特定のエリア内にあるときに、テキストがふわっと表示され、マウスに追従する動きを実装します。
シンプルなコードでおしゃれな演出ができるので、ぜひ試してみてください！
マウスカーソル追従エフェクトの実装方法
今回使用するコードでは、以下の動きを実現します。
- カーソルが特定のエリア内に入るとテキストが表示される
- カーソルが動くと、テキストがマウスに追従する
- エリア外に出ると、ふわっと非表示になる
では、さっそく実装してみましょう！
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
HTMLコード
まずは、基本となるHTMLを用意します。
- wrap クラスの div は、カーソルが動く範囲を指定するための要素です。
- cursor-text クラスの a は、マウスカーソルに追従するテキスト要素です。
CSSコード
.wrap{
height:500px;
background:#3a3a3a;
}
.cursor-text {
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
left: 0;
top: 0;
font-size: 18px;
font-weight: bold;
color: #333;
text-decoration: none;
pointer-events: auto;
opacity: 0;
visibility: hidden; /* 最初は非表示 */
transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}
- .wrapに背景色を設定し、カーソルの追従範囲を明確にする
- .cursor-text に 丸いデザイン を適用し、中央にテキストを配置
- .cursor-text の position: fixed; を使い、カーソルに追従できるようにする
- 最初は opacity: 0; visibility: hidden; で非表示にし、カーソルが範囲に入ったら表示
JavaScriptコード
続いて、マウスカーソルの位置にテキストを追従させるためのJavaScriptを記述します。
const cursorText = document.querySelector(".cursor-text");
const conversionWrap = document.querySelector(".wrap");
// マウスが移動したときに発動
document.addEventListener("mousemove", (e) => {
const rect = conversionWrap.getBoundingClientRect();
// マウスが .wrap の内外にいるかを判定
if (
e.clientX >= rect.left && e.clientX <= rect.right &&
e.clientY >= rect.top && e.clientY <= rect.bottom
) {
// .wrap の内側にいる場合
cursorText.style.opacity = 1;
cursorText.style.visibility = "visible"; // 表示
cursorText.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
} else {
// .wrap の外側に出た場合
cursorText.style.opacity = 0;
cursorText.style.visibility = "hidden"; // 非表示
}
});
ポイント解説
- document.addEventListener("mousemove", (e) => {...}) → マウスの座標を取得し、カーソルの位置を更新
- getBoundingClientRect() で .wrap の座標を取得 → マウスが .wrap内にあるかどうかを判定
- .cursor-text の transform を変更 → translate(${e.clientX}px, ${e.clientY}px) でカーソルに追従
- opacity と visibilityの変更で表示/非表示を制御 → .wrap の外に出ると非表示になる
応用カスタマイズ
1. テキストを変更する
"More" の部分を動的に変更することで、クリック時に別のメッセージを表示できます。
cursorText.textContent = "Click!"; 2. カラーを変える
背景色を変更して、サイトの雰囲気に合わせたデザインにカスタマイズできます。
.cursor-text { background-color: rgba(0, 255, 255, 0.8); } まとめ
- マウスカーソルに追従するテキストを実装し、サイトのインタラクションを強化
- JavaScriptの mousemove を活用し、スムーズな動きを実現
- CSSでデザインを自由にカスタマイズできる
- カーソルの範囲判定を getBoundingClientRect() で取得し、エリア内外で表示を切り替え
このエフェクトを使って、Webサイトのユーザー体験を向上させましょう！
ぜひ試してみてください。
こんなお悩みありませんか？
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
集客できるWebサイトをお求めやすい価格で制作します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
