【Next.js】テキストが順に出るアニメーションの作り方

テキストrevealは、行か単語までが境界です。1文字ずつ出すと、キャッチコピーが読めず、スクリーンリーダーにも不親切です。

LP なら、ラベル → 見出し1行 → 本文、の3段で足ります。文字単位はオープニング映像向きです。

作り方は3つです。CSS の遅延。単語を map して motion。完成ヒーローに同梱されたrevealを使う。

1つ目は、見出しが揃う前にスクロールできることです。ファーストビューでは、見出しが揃ってから下を見せます。

2つ目は、折り返しで単語の順番が崩れることです。絶対配置で1文字ずつ置くと、リサイズで壊れます。

3つ目は、reduced-motion を無視することです。OS の設定では、最初から全文を出します。

ラベル、h1、p に animation-delay をずらします。単語分割は不要です。多くの LP はこれで十分今っぽく見えます。

見出しを split(' ') し、span に delay を付けます。日本語は「、」や読点で割るか、行単位にします。空白の無い日本語を1文字ずつ割らないでください。

aria-label で全文を見出しに残し、視覚だけの分割にするか、最初から全文を DOM に置いて visually 隠す、のどちらでも、情報は動きに依存させません。

行のマスク、ノックアウトの文字、2秒でロゴが抜ける、といった塊は、方法2の延長では半日かかります。

DesignLayer のヒーローをライブで見て、そのrevealごと載せてください。解説は https://design-layer.com/articles/nextjs-animated-hero-section-guide です。

無料コピーは1日3回です。今日ヒーロー1本、で足ります。

演出で繰り返し出る質問です。