フォント展開アニメーション効果

概要

ウェブデザインにおいて、動的なフォントエフェクトはユーザー体験を大幅に向上させ、テキストをより魅力的にします。本記事では、フォント展開アニメーションを実装します。マウスホバー時にフォントの太さ（weight）、幅（width）、文字間隔（letter-spacing）が変化し、滑らかなアニメーション効果を生み出します。

成果物

コード解説

1. 可変フォント（Variable Font）の選択

この例では、Google FontsのSmooch Sansフォントを使用しており、フォントの太さ（wght）と幅（wdth）の変化をサポートしています。

font-variation-settings:
  'wght' var(--wght),
  'wdth' var(--wdth);

このカスタムプロパティを利用すると、フォントの太さや幅を動的に調整し、滑らかなアニメーション効果を実現できます。

2. CSS変数を使ったアニメーション設定

.animated-text {
  --wght: 100;
  --wdth: 100;
  --letter-spacing: 0;
}

.animated-text:hover {
  --wght: 600;
  --wdth: 300;
  --letter-spacing: 0.6rem;
}

ここでは CSS変数 を使用してフォントの変化を制御しています。マウスホバー時にフォントの太さが増し、幅が広がり、文字間隔も拡大します。

3. トランジション効果（Transition）

.animated-text .letter {
  transition:
    font-variation-settings 1s ease-in-out,
    letter-spacing 2s ease-in-out;
}

• font-variation-settings 1s ease-in-out：フォントの太さや幅を1秒間で滑らかに変化。
• letter-spacing 2s ease-in-out：文字間隔の変化を2秒間かけて適用し、より滑らかなエフェクトを実現。

まとめ

このコードは、CSS変数と可変フォントの特性を活用し、ホバー時にテキストを動的に変化させるエレガントなフォントアニメーションを実現します。異なるフォントを試したり、アニメーションのパラメータを調整することで、さらに個性的なデザインが可能になります。

このブログ記事がお役に立てれば幸いです。🚀