テキスト スクランブル → 確定演出
ランダムな記号が次々と入れ替わり、最終的に正しいテキストへ確定していく「ハッキング風」の文字演出です。仕組みはシンプルで、確定済みの文字数 idx を requestAnimationFrame ごとに少しずつ増やし、まだ確定していない位置には記号プールからランダムな 1 文字を当て続けます。
解説
ランダムな記号が次々と入れ替わり、最終的に正しいテキストへ確定していく「ハッキング風」の文字演出です。仕組みはシンプルで、確定済みの文字数 idx を requestAnimationFrame ごとに少しずつ増やし、まだ確定していない位置には記号プールからランダムな 1 文字を当て続けます。idx が文字数を超えると最終テキストに固定して停止。等幅フォント（'SF Mono',Menlo,monospace）と min-width:8ch で、文字が入れ替わってもレイアウトが横に揺れないようにしているのが実装のポイントです。
使う場面
- テック系サービスやスタートアップのヒーロー見出し
- ブランド名やタグラインの初回登場アニメ
- 「読み込み完了」を演出するスプラッシュ表示
確定の速さは idx+=0.4 の増分で調整でき、値を大きくすると速く確定します。記号の雰囲気を変えたければ chars の中身を差し替えるだけ。注意点として、アニメ中は記号が表示されるため、SEO や読み上げの観点では data-text に正規の文字列を持たせて初期テキストにも入れておくと、JavaScript 抜きでも内容が伝わります。動きを抑える設定のユーザーには、即座に確定文字を表示する分岐を足すと親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
表示する文字列はどこで変えますか。
h1のdata-text属性と中身のテキストを書き換えます。JavaScriptはdata-textの値を最終テキストとして読むので、その値を変えれば確定後の文言が変わります。日本語よりも英字や記号のほうがハッキング風の質感が出ます。
入れ替わるスピードは調整できますか。
JavaScript内のidx+=0.4の数値を変えると速度が変わります。大きくすると一気に確定し、小さくするとゆっくり文字が固まっていきます。混ざる記号の見た目はchars変数の文字を入れ替えて調整できます。