スクロールで 1 文字ずつ表示
見出しが画面に入った瞬間、文字が左から1つずつ浮かび上がるタイプライター風の演出です。JavaScript で見出しの文字列を1文字ずつ span に分解し、それぞれに transition-delay を少しずつ加算して順番に現れるようにします。
解説
見出しが画面に入った瞬間、文字が左から1つずつ浮かび上がるタイプライター風の演出です。JavaScript で見出しの文字列を1文字ずつ span に分解し、それぞれに transition-delay を少しずつ加算して順番に現れるようにします。表示・非表示の切替は IntersectionObserver が担当し、threshold:.4 を超えて見え始めたら is-on を付け、各 span の opacity と transform が遅延つきで戻って文字が立ち上がります。画面外へ出ると is-on が外れて初期状態へ戻るため、スクロールで上下するたびに演出が再生されます。
使う場面とカスタマイズ
記事のキーメッセージ、ブランドの宣言文、セクションの導入コピーなど、印象づけたい短い一文に向きます。出現の速さは1文字ごとの遅延量で決まり、値を小さくすると一気に、大きくするとゆっくり流れます。注意点として、長い文章に使うと最後まで表示されるのに時間がかかり読みづらくなるため、短い見出しに絞るのがコツです。動きに敏感な利用者に配慮するなら、prefers-reduced-motion を検知したときは分解せず全文を即座に表示する分岐を用意すると安心です。
使用例・適したシーン
- LP の演出強化
- 記事の読了率向上
- ストーリーテリング表現
よくある質問
文字が出る速さを変えたい。
1文字ごとに加算している遅延量を調整します。値を小さくすると速く一気に、大きくするとゆっくり順番に現れます。文の長さに合わせてテンポを整えてください。
長い文章にも使えますか。
使えますが、文字数が多いほど全部が出そろうまで時間がかかり読みにくくなります。キーメッセージや見出しなど短い一文に絞るのが効果的です。長文には別の控えめな演出が向いています。