やってみよう画面をスクロールして、背景と文字の動く速さの違いを見てください
アニメーション・演出マイナー（知る人ぞ知る）
パララックス
Parallax Scrolling
スクロールすると、背景はゆっくり、手前は速く動いて、奥行きが出る。
別名パララックス効果視差効果パララックススクロール
どこで使われている？
- よく見かける場所
- ブランドの紹介サイト、旅行・不動産のLP、Appleの製品ページ
- 使うとよい場面
- ページの最初で、奥行きのある印象的な見せ方をしたいとき
- 避けたい場面
- 情報を素早く探すページ、動きに酔いやすい人への配慮がない使い方
補足動きが苦手な人のために、端末の「視差効果を減らす」設定がオンなら止めるのが親切です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「パララックス（Parallax Scrolling）」を実装してください。 動き：ページ上部の大きな画像を背景レイヤーと手前のレイヤーに分け、スクロール量に対して背景は半分の速さで動かし、手前の文字は通常の速さで動かすことで、奥行きを感じさせる。 使う部品：スクロール量で transform を変える（CSS の animation-timeline: scroll() も使える）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | スクロール量で transform を変える（CSS の animation-timeline: scroll() も使える） |
|---|---|
| iPhoneアプリなら | .visualEffect { } でスクロール位置に応じて offset を変える |
| Androidアプリなら | Modifier.graphicsLayer で translationY をスクロール量の一部に |
| Flutterなら | FlexibleSpaceBar(collapseMode: CollapseMode.parallax) |
| React Nativeなら | Animated.event + interpolate |