Zenn
🍊

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

2023/03/09に公開
CSS
HTML
アニメーション
tech

リンクをホバーすると、テキストが上に移動するアニメーションをtext-shadowで実装する方法について学びました

サンプル

サンプルはこちら↓

コード抜粋

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

style.scss
.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は以下の値を空白区切りで指定できます。

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

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

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

詳しい解説はこちら↓
https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow

color:transparent;を指定する

今回は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;

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

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

参考サイト

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

まとめ

実際に使用するかは置いといて、実装方法の選択肢が増えることは良いことだと思うので良い勉強になりました！

Discussion