やってみよう画面の中をゆっくり下にスクロールしてみてください
スクロールマイナー（知る人ぞ知る）
スクロールで文字が浮かび上がる
Scroll Text Reveal
薄い灰色の大きな文章が、下にスクロールするにつれて、左から1文字ずつ濃い色に変わっていく。
別名テキストリビール文字が順に濃くなるスクロール連動の文字Text Highlight on Scroll
どこで使われている？
- よく見かける場所
- 製品紹介サイトのメッセージ、ブランドの理念、ポートフォリオの自己紹介
- 使うとよい場面
- 短く大事な一文を、じっくり読ませたいとき
- 避けたい場面
- 長い説明文（読み終わるまで時間がかかりすぎる）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「スクロールで文字が浮かび上がる（Scroll Text Reveal）」を実装してください。 動き：大きな文章を最初は薄い色で表示し、スクロールの進み具合に合わせて、先頭から1文字（または1単語）ずつ濃い色に切り替えていく。上に戻すとまた薄くなる。 使う部品：スクロール量に合わせて文字ごとの色を変える（CSS の animation-timeline: view() でも可）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | スクロール量に合わせて文字ごとの色を変える（CSS の animation-timeline: view() でも可） |
|---|---|
| iPhoneアプリなら | 自作（スクロール量で文字ごとの色を変える） |
| Androidアプリなら | 自作（AnnotatedString の色を変える） |
| Flutterなら | 自作（RichText の色を変える） |
| React Nativeなら | 自作 |