タイポグラフィ

タイポグラフィに分類されるWeb表現技法13件。グラデーションテキスト、テキストアウトライン（中抜き文字）、文字ごと出現アニメ、タイプライター効果など。ライブデモとコピーできるコード付き。

background-clip: text で文字をグラデーションに切り抜き、背景位置のアニメで色を流します。ヒーロー見出しやロゴに最適です。

-webkit-text-stroke で塗りのない輪郭文字を作り、塗りレイヤーと重ねてホバーで色が流れ込みます。バナーやポップな見出しに使えます。

JSでテキストを1文字ずつspan化し、遅延を付けて波打つように出現させます。ページロード時の見出し演出に向いています。

ターミナル風UIで複数のフレーズを1文字ずつ打って消すループ。点滅カーソル付きで、ヒーローの動的キャッチコピーに使えます。

writing-mode: vertical-rl で日本語を縦組みにし、和風の段組みを表現します。詩・俳句・和テイストのサイトに最適です。

多重 text-shadow で発光する管を再現し、不規則な点滅アニメで本物のネオンらしさを出します。ナイトライフ系やレトロなサイトに。

疑似要素でRGBをずらした2枚のコピーを clip-path で切り抜き、デジタルノイズ風のグリッチを作ります。サイバー／テック系の見出しに。

JSで文字ごとに font-weight をsin波で連続変化させ、可変フォントのような波打つ太さ変化を再現します。動的なロゴやヘッダーに。

多層 text-shadow で立体的に押し出した文字を作り、マウス追従でわずかに傾けます。レトロでインパクトのある見出しに使えます。

ランダムな記号から正しい文字へ左から順に解読されていく演出をJSで実装。ハッカー風・読み込み完了の表現に向いています。

大きな単語が拡大・回転・スライドしながら次々と飛び込み、躍動的に入れ替わるループ演出をJSで実装します。語ごとにアニメ種別を切り替えて単調さを抑え、入場と退場をなめらかに繋ぎます。ヒーローやオープニングの強いキャッチに最適です。

見出しテキストを background-clip: text で写真やアニメグラデにくり抜き、背景をゆっくり動かして文字の中で景色が流れて見える表現です。picsum画像とCSSグラデを重ね、文字の輪郭の中だけに動く絵を閉じ込めます。インパクトのあるヒーロー見出しに向いています。

段落をword単位に分割し、内部スクロールの進行に合わせて薄い文字色から明るいブランド色へ一語ずつ変化させる読み進めハイライト。IntersectionObserverで各wordの着色を制御します。記事やストーリー系のリードに最適です。