43

CSSで実現した文字の呼吸アニメーション

可変フォントとCSSアニメーションを組み合わせて、文字がまるで呼吸しているかのようなアニメーションを実現しました。

Website

使用技術

  • HTML/CSS: アニメーションとレイアウト
  • JavaScript: アニメーションの制御
  • 可変フォント: 「呼吸」効果の表現

制作意図

  • 文字アニメーションの表現力を追求
  • HTML/CSS/JSの連携方法を学ぶ

こだわりポイント

  • 「呼吸」のリアルな動きの表現
  • グラデーションとクリッピングによる立体感
  • アクセシビリティへの配慮

HTML、CSS、JSそれぞれの特徴を生かしたコーディングがなされていること、アニメーション表現とアクセシビリティへのこだわりが見える内容にまとめられたと思います。

HTML

<div class="container">
  <p aria-label="Prodouga">
    <span aria-hidden="true">P</span>
    <span aria-hidden="true">r</span>
    <span aria-hidden="true">o</span>
    <span aria-hidden="true">d</span>
    <span aria-hidden="true">o</span>
    <span aria-hidden="true">u</span>
    <span aria-hidden="true">g</span>
    <span aria-hidden="true">a</span>
    <span aria-hidden="true">.</span>
    <span aria-hidden="true">c</span>
    <span aria-hidden="true">o</span>
    <span aria-hidden="true">m</span>
</p>
</div>

HTMLの解説

このHTMLは「文字の呼吸」の見出し文字を実装したコードです。

主なポイントは以下の通りです:

  • div.containerでコンテンツを中央寄せするレイアウト
  • pタグで見出し文字をラップ
  • pタグ内の各文字をspanタグでラップ
    • aria-hidden=true でアクセシビリティ用に非表示にしている
  • aria-labelでpタグ全体の読み上げ文字列を設定

このようにpタグ内の文字をspanタグで個別にくくることで、CSSやJSで文字ごとの効果を付与できます。

アクセシビリティ面も配慮し、スクリーンリーダーでの読み上げ用に全体の文字列を用意しています。

視覚効果とセマンティック構造の両立という好例だと思います。

HTML、CSS、JSが連携した実践的なコーディングの例です。

CSS

CSSの解説

pタグの文字にグラデーションの背景を設定し、背景が文字にクリッピングされるようにしている

pタグ内のspanにanimationを設定し、font-variation-settingsでフォントのWeightを変化させることで呼吸効果を出している

@keyframesでanimationの0%と100%時のfont-variation-settingsを指定

このように、可変フォントとCSSのanimation、gradient、clippingなどの機能を組み合わせることで、文字が呼吸しているような実現しています。

軽快な動きとグラデーションの背景が魅力的なエフェクトになっています。CSSの柔軟な表現力を感じさせるコード例だと思います。

JavaScript

const spans = document.querySelectorAll('p span');
 
const numLetters = spans.length;
 
spans.forEach(function(span, i) {
    const mappedIndex = i - (numLetters / 2)
    span.style.animationDelay = (mappedIndex * 0.25) + 's';
});

JavaScriptの解説

このJavaScriptコードは、HTMLのpタグ内のすべてのspan要素に対して、アニメーションのdelayを設定しています。

主な処理は以下の通りです:

  • document.querySelectorAllでpタグ内のすべてのspan要素を取得
  • spans.lengthでspanの総数を取得
  • forEachで各spanに対して処理
    • i は現在のspanのインデックス
    • mappedIndex は中央のspanを0とした時のインデックスにマッピング
    • animationDelayをマッピングしたインデックス x 0.25秒 に設定

これにより、span要素が中央の文字から順にアニメーションが始まるようになり、文字全体で波紋のような動きになります。

配列のマッピングとアニメーションディレイの制御を組み合わせることで、独特の動きを実現している例です。 JavaScriptを使ってCSSアニメーションをより高度にコントロールできる実力が必要です。

Top