hoverで文字が回転するおしゃれなリンク演出の作り方
Webサイトのリンクやナビゲーションに、ちょっとした動きを加えるだけで印象は大きく変わります。例えば、通常のリンクは色が変わるだけでシンプルですが、そこに「hoverすると文字が回転して見える演出」を取り入れると、ユーザーは「おっ」と感じてサイトに親しみを持ってくれます。文字が“コロッ”と転がるようなアニメーションは、視覚的に楽しく、シンプルなサイトでも一気におしゃれで遊び心のある雰囲気に変えてくれる効果があります。特にポートフォリオサイトや、キャンペーン用の特設ページなど、印象に残るデザインが求められる場面で活躍します。Webサイトのリンクやナビゲーションに、ちょっとした動きを加えるだけで印象は大きく変わります。今回は「hoverすると文字が回転して見える演出」を紹介します。文字が“コロッ”と転がるようなアニメーションは、視覚的に楽しく、シンプルなサイトでも一気におしゃれな印象になります。

実装のポイント

この演出の肝は次の2つです。

1. 文字を1文字ずつ <span> で囲む
2. CSSの text-shadow を利用して上下に入れ替える

まずはjQueryを使って、テキストを1文字ごとに分解し、それぞれを <span> タグでラップします。その際、CSS変数 --index を付与しておくことで、後からアニメーションに「時間差」をつけられるようにしています。これにより、hoverした瞬間に文字が一斉に変化するのではなく、波のようにずれて動くことで、自然でおしゃれな動きを演出できます。

CSS側では、color: transparent; を指定して文字そのものを消し、代わりに上下に異なる色の影（text-shadow）を重ねています。hoverするとその影が上下で入れ替わり、あたかも文字が上に回転したかのように錯覚させる仕組みです。実際に3D回転しているわけではないのに、シンプルなCSSだけで立体的な動きが表現できるのはとても面白いポイントです。

実装コード

実際のコードは以下のようになります。CodePenでも確認できます。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

1文字だけならHTML＋CSSでもOK

今回のコードではjQueryを使って自動的に<span>を生成しましたが、自分でspanを囲めばHTML＋CSSだけで再現可能です。

これだけでも「くるっ」と文字が回転して見える演出が可能です。

カスタマイズのヒント

• 速度調整 … transition-durationを変えると速さを調整可能
• 遅延幅 … 0.05sを変更すれば波のような動きも変化
• 移動量 … 0.9emを大きくすれば回転がダイナミックに、小さくすれば控えめに
• 色 … 背景に合わせて#fffや#000を入れ替えると視認性が向上

まとめ

今回は、hover時に文字が「くるっ」と回転して見えるリンク演出を紹介しました。

• jQueryで1文字ずつ <span> を生成
• CSSの text-shadow で上下を入れ替え
• transition-delay で時間差をつけて波のような動きを演出

ちょっとした工夫ですが、リンクやナビゲーションがぐっとおしゃれに見え、ユーザーの印象にも残りやすくなります。まずは1文字で試して仕組みを理解し、その後リスト全体に適用してみると効果的です。ぜひ自分のWebサイトにも取り入れて、動きのあるデザインを楽しんでみてください。

Webサイト、LP制作やお仕事の依頼、ご相談など
お気軽にお問い合わせください。