やってみよう「もう一度」を押すか、見出しにマウスを乗せてください
アニメーション・演出マイナー（知る人ぞ知る）
テキストスクランブル
Text Scramble
文字が一瞬ランダムな記号でガチャガチャ変わり、左から順に正しい言葉にそろっていく。
別名文字のスクランブルランダム文字アニメーションデコード演出ハッカー風の文字
どこで使われている？
- よく見かける場所
- テック系・ゲーム系のサイトの見出し、ポートフォリオ、映画のタイトル演出
- 使うとよい場面
- 近未来・ハッカー風の雰囲気で、見出しを印象づけたいとき
- 避けたい場面
- 読む人の多い長い文章、落ち着いた雰囲気のサイト
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「テキストスクランブル（Text Scramble）」を実装してください。 動き：見出しの各文字を、ランダムな英数字や記号に短い間隔で入れ替え続け、左の文字から順番に正しい文字に固定していく。全体で0.6〜1秒ほどで完成させる。 使う部品：requestAnimationFrame で文字を入れ替える（自作）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | requestAnimationFrame で文字を入れ替える（自作） |
|---|---|
| iPhoneアプリなら | Timer で Text の文字を入れ替える（自作） |
| Androidアプリなら | LaunchedEffect で文字を入れ替える（自作） |
| Flutterなら | Timer.periodic で文字を入れ替える（自作） |
| React Nativeなら | setInterval で文字を入れ替える（自作） |