やってみようリストをスクロールして、カードが浮かび上がる様子を見てください
アニメーション・演出マイナー（知る人ぞ知る）
スクロールアニメーション
Scroll Reveal / Scroll-triggered Animation
スクロールして画面に入ってきた写真や文字が、下からフワッと浮かび上がる。
別名フェードインアニメーションスクロールリビール出現アニメーションスクロール連動アニメーション
どこで使われている？
- よく見かける場所
- 企業サイト、サービス紹介のLP、ポートフォリオ
- 使うとよい場面
- 見出しや写真を、スクロールに合わせて印象的に見せたいとき
- 避けたい場面
- 情報を素早く読んでほしいページ、全部の要素に付けること（読みにくくなる）
補足やりすぎると読みにくくなるので、見出しや画像など大事なところだけに使うのがおすすめです。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「スクロールアニメーション（Scroll Reveal / Scroll-triggered Animation）」を実装してください。 動き：スクロールして要素が画面内に入ったタイミングで、下から少し移動しながら透明から不透明へフェードインさせる。複数並んでいる場合は少しずつ時間をずらして順番に表示する。 使う部品：IntersectionObserver + CSS アニメーション（CSS の animation-timeline: view() も使える）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | IntersectionObserver + CSS アニメーション（CSS の animation-timeline: view() も使える） |
|---|---|
| iPhoneアプリなら | .scrollTransition { } |
| Androidアプリなら | AnimatedVisibility を画面に入ったときに表示 |
| Flutterなら | flutter_animate + visibility_detector パッケージ |
| React Nativeなら | react-native-reanimated の entering（FadeInDown など） |