BLOG

シンプルながらもパッと目を引く「文字にスポットライトが当たるホバーアニメーション」をご紹介します。

マウスを乗せると、カーソルに合わせて円形のスポットライトが表示され、重なった部分の文字色が切り替わるアニメーションです。

実際の動きはCodePenで確認できるようにしていますので、ぜひ参考にしてみてください。

どんなアニメーション？

通常時はシンプルなテキストですが、マウスを乗せると円形の背景が表示され、文字の一部が反転したように見えます。

ただ文字色が変わるだけのホバー演出とは違い、カーソルの動きに合わせてスポットライトが当たるような見た目になるのが特徴です。

シンプルなデザインの中に、少しだけ遊び心を加えたいときに使いやすいアニメーションです。

実際の動きとソースコード

実際に作成したデモをご用意しました。

テキストにマウスを乗せると、円形のスポットライトが表示され、文字色が切り替わる動きを確認できます。

実装のポイント

このアニメーションでは、マウスカーソルの位置に合わせて円形の要素を動かしています。

円形の要素をテキストの上に重ねることで、スポットライトが当たっているような見た目を作っています。

また、重なった部分の文字色が変わるようにすることで、ただ円が動くだけではなく、テキスト自体にも変化が出るようにしています。

シンプルな構成ですが、少し工夫するだけで印象的なホバー演出にできます。

こんな場面で使うのがおすすめ！

このアニメーションは、以下のような場所で取り入れるのがおすすめです。

• テキストリンク：普通のリンクを少し特別に見せたいとき
• CTAボタン：お問い合わせや購入など、クリックを促したい場所
• グローバルナビゲーション：メニューにマウスを乗せたときの演出
• ファーストビュー：シンプルな画面に少し動きを加えたいとき

使うときの注意点

目を引くアニメーションなので、すべてのリンクに使うよりも、目立たせたい場所に絞って使うのがおすすめです。

また、文字サイズや円の大きさによって印象が変わるため、実際のサイトに合わせてサイズを調整すると、より自然に馴染みます。

まとめ

今回は、文字にスポットライトが当たるようなホバーアニメーションを紹介しました。

シンプルなテキストでも、ホバー時の動きを少し工夫するだけで、印象に残るUIにできます。

リンクやボタンに少しアクセントを加えたいときに、ぜひ使ってみてください。