【CSS】text-shadowを使ったホバーアニメーション

2023年3月8日2023年9月24日

URLをコピーしました！

この記事のサムネイルのようにリンクをホバーすると、テキストが上に移動するアニメーションをtext-shadowで実装する方法について学びました。

サンプル

サンプルはこちら↓

See the Pen text-shadow hover animation by ユイト (@mikiprogram) on CodePen.

コード抜粋

アニメーションに関する部分のみ抜粋したコードです↓


.p-globalNav__link {
  --base-offset-y: 1.5em;
  overflow: hidden;
  transition: text-shadow 0.3s ease-in-out;
  color: transparent;
  text-shadow: 0 calc(var(--hover-offset-y, 0em) * -1) 0 #000,
    0 calc(var(--base-offset-y, 1.5em) - var(--hover-offset-y, 0em)) 0 #000;
}

@media (hover: hover) and (pointer: fine) {
  .p-globalNav__link:hover {
    --hover-offset-y: 1.5em;
  }
}

メモ

実装において大事だと思ったことをメモします。

text-shadowについて

text-shadowは以下の4つの値を半角空白区切りで指定できます。

水平方向の影の位置[必須]
垂直方向の影の位置[必須]
ぼかし量[省略可で初期値は0]
影の色[省略可で初期値はユーザエージェントが指定した色]

また、カンマで区切って影を複数作成することができます↓

text-shadow: 1px 1px 0 #000, 1px 1px 1px #ccc;

詳しくはこちら↓

MDN Web Docs

text-shadow – CSS: カスケーディングスタイルシート | MDN text-shadow は CSS のプロパティで、テキストに影を追加します。文字列およびその装飾 (decoration) に適用される影のリストをカンマで区切ったリストで受け付けます。そ…

文字色を透明にする理由

今回はtext-shadowのみアニメーションしているため、文字色が視覚的に見えているとおかしいため透明色にしています。

動画で確認するとわかりやすいです↓

overflow:hidden;を指定する理由

要素のパディングボックスからはみ出た部分は非表示にします。

以下のようになるのを防ぐためです↓

アニメーション部分について

関係のあるコードは以下です↓

--base-offset-y:1.5em;
text-shadow: 0 calc(var(--hover-offset-y, 0em) * -1) 0 #000,0 calc(var(--base-offset-y, 1.5em) - var(--hover-offset-y, 0em)) 0 #000;
--hover-offset-y: 1.5em;

一つ目の影は、hoverされるまで透明にした文字と同じ位置に表示されます。hoverされると、1.5em * -1 = -1.5emで1.5em分だけ上に移動します。

二つ目の影は、hoverされるまで透明にした文字から1.5em分だけ下の位置に表示されます。
hoverされると、1.5em - 1.5em = 0で透明にした文字と同じ位置に移動します。

参考サイト

フロントエンドクラブのDiscordでkojika17さんに教えて頂いたサイトから学びました↓

AI Image Generator – Create Art,…

AI Image Generator – Create Art, Images & Video | Leonardo AI Transform your projects with our AI image generator. Generate high-quality, AI generated images with unparalleled speed and style to elevate your creative visio…