ホバーで立体影を付けるアニメーション｜hoverShadow 実装ガイド（CSS＋JavaScript）

カテゴリー: UI/UXモーションデザイン タグ: , , ,

hoverShadow

「hoverShadow」は、リンクにホバーしたときにシャドウ効果が浮き上がり、視覚的に印象的なフィードバックを提供するアニメーションです。このエフェクトでは、CSSとJavaScriptを組み合わせて、テキストに動的な影の変化を実現しています。

この記事では、必要なHTML、CSS、JavaScriptコードを詳しく解説し、CodePenでのプロジェクト公開にも適した形で仕上げました。

hoverShadowアニメーションのポイント(font-weightをboldに)

  1. ホバー時にシャドウが表示される
    • マウスをリンクに合わせると、シャドウが浮き上がる効果が発生します。
  2. 擬似要素を利用してシャドウ部分を独立管理
    • ::before擬似要素を使用し、リンク本体のテキストとは別にシャドウを生成します。
  3. JavaScriptで動的にテキストを設定
    • JavaScriptを使って、擬似要素のcontentにリンクテキストを反映します。

完成イメージ

以下は、「hoverShadow」アニメーションの実際の効果です：

  • ホバー時に、シャドウ部分が太くなり、リンクのデザインが強調されます。
  • 各リンクのテキストは動的に取得され、擬似要素に反映されます。

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

解説

  1. HTML:
    • 複数のリンク（<a>タグ）を用意しています。それぞれにhover-effectクラスを付けています。
  2. CSS:
    • 擬似要素::beforeを使用して、シャドウ部分を作成しています。
    • ホバー時にtext-shadowとfont-weightを変更して、シャドウを太く見せる効果を実現しています。
  3. JavaScript:
    • 各リンクのテキストを取得して、CSSのカスタムプロパティ–textに動的に設定しています。
    • この方法により、HTMLを直接変更する必要がなく、柔軟にテキストを反映できます。

カスタマイズ例

「hoverShadow」アニメーションは、柔軟にカスタマイズできるのも魅力の一つです。以下にいくつかのカスタマイズ例を紹介します。

1. シャドウの色を変更

デフォルトでは灰色のシャドウが適用されていますが、カラーを変更することで、異なる雰囲気を演出できます。

2. シャドウのぼかしを追加

より柔らかい印象を与えたい場合は、ぼかしを追加します。

3. アニメーション時間を変更

エフェクトのスピードを調整して、よりドラマチックな効果を出すことができます。

4. 複数のシャドウを重ねる

複数のシャドウを重ねることで、立体的な効果を実現します。

これらのカスタマイズ例を参考に、プロジェクトのデザインやテーマに合わせて「hoverShadow」アニメーションを自由に変更してみてください！コードを試しながら、自分だけのユニークなシャドウ効果を作成してみましょう。

まとめ

「hoverShadow」アニメーションは、シンプルで効果的なデザイン改善の一例です。CSSとJavaScriptの連携によって、柔軟で再利用可能なコードを作成できます。ぜひ、自分のプロジェクトに取り入れてみてください！