hoverShadow
「hoverShadow」は、リンクにホバーしたときにシャドウ効果が浮き上がり、視覚的に印象的なフィードバックを提供するアニメーションです。このエフェクトでは、CSSとJavaScriptを組み合わせて、テキストに動的な影の変化を実現しています。
この記事では、必要なHTML、CSS、JavaScriptコードを詳しく解説し、CodePenでのプロジェクト公開にも適した形で仕上げました。
hoverShadowアニメーションのポイント(font-weightをboldに)
- ホバー時にシャドウが表示される
- マウスをリンクに合わせると、シャドウが浮き上がる効果が発生します。
- 擬似要素を利用してシャドウ部分を独立管理
- ::before擬似要素を使用し、リンク本体のテキストとは別にシャドウを生成します。
- JavaScriptで動的にテキストを設定
- JavaScriptを使って、擬似要素のcontentにリンクテキストを反映します。
完成イメージ
以下は、「hoverShadow」アニメーションの実際の効果です：
- ホバー時に、シャドウ部分が太くなり、リンクのデザインが強調されます。
- 各リンクのテキストは動的に取得され、擬似要素に反映されます。
See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.
解説
- HTML:
- 複数のリンク（<a>タグ）を用意しています。それぞれにhover-effectクラスを付けています。
- CSS:
- 擬似要素::beforeを使用して、シャドウ部分を作成しています。
- ホバー時にtext-shadowとfont-weightを変更して、シャドウを太く見せる効果を実現しています。
- JavaScript:
- 各リンクのテキストを取得して、CSSのカスタムプロパティ–textに動的に設定しています。
- この方法により、HTMLを直接変更する必要がなく、柔軟にテキストを反映できます。
カスタマイズ例
「hoverShadow」アニメーションは、柔軟にカスタマイズできるのも魅力の一つです。以下にいくつかのカスタマイズ例を紹介します。
1. シャドウの色を変更
デフォルトでは灰色のシャドウが適用されていますが、カラーを変更することで、異なる雰囲気を演出できます。
2. シャドウのぼかしを追加
より柔らかい印象を与えたい場合は、ぼかしを追加します。
3. アニメーション時間を変更
エフェクトのスピードを調整して、よりドラマチックな効果を出すことができます。
4. 複数のシャドウを重ねる
複数のシャドウを重ねることで、立体的な効果を実現します。
これらのカスタマイズ例を参考に、プロジェクトのデザインやテーマに合わせて「hoverShadow」アニメーションを自由に変更してみてください！コードを試しながら、自分だけのユニークなシャドウ効果を作成してみましょう。
まとめ
「hoverShadow」アニメーションは、シンプルで効果的なデザイン改善の一例です。CSSとJavaScriptの連携によって、柔軟で再利用可能なコードを作成できます。ぜひ、自分のプロジェクトに取り入れてみてください！
よくある質問（FAQ）
Q. ホバーで立体影を付けるアニメーションの実装方法は？
CSS transitionとbox-shadowを組み合わせ、ホバー時にbox-shadowの値を変化させます。影のX/Y方向のオフセットを大きくし、ぼかし半径を広げることで浮き上がったような立体感が出ます。同時にtransform: translateYで要素を少し上に移動させると、より自然な浮遊感を演出できます。
Q. リアルな立体影をCSSで表現するコツは？
単一のbox-shadowではなく、複数のbox-shadowをカンマ区切りで重ねると自然な影になります。近い影（小さいオフセット＋少ないぼかし＋濃い色）と遠い影（大きいオフセット＋多いぼかし＋薄い色）を組み合わせるのがGoogleのMaterial Designでも採用されている手法です。影の色は真っ黒ではなくrgba(0,0,0,0.1〜0.3)程度が自然です。
