プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。似ているモーション
A
中をスクロールしてください
Scroll-Linked Animation (スクロール連動アニメーション)
別名 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
アニメーションの進行がスクロール位置に直結し、進めると再生され、戻すと巻き戻ります。
使いどころ
ストーリーテリングページ、進行表現
[適用する場所]にスクロール連動アニメーション(Scroll-Linked Animation)を追加してください。スクロール駆動アニメーション(scroll-driven animation)、スクロールスクラブ(scroll scrub)とも呼ばれます。
アニメーションはスクロール位置にぴったり合わせて動き、下へスクロールすると進み、上へ戻すとその場で巻き戻るようにしてください。時間ベースのイージングは付けないでください。
アニメーション全体を明確なスクロール範囲に割り当て、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は自然な静止状態を表示してください。A
中をスクロールしてください
Zoom on Scroll (スクロールズーム)
別名 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
スクロールに合わせて、要素やシーンが拡大・縮小します。
使いどころ
ヒーローのイントロ、画像の拡大表示
[適用する場所]にスクロールズーム(Zoom on Scroll)の効果を追加してください。scroll zoom、スケールオンスクロール(scale on scroll)とも呼ばれます。
セクションが画面に留まっている間、要素が小さなカードからスクロールに合わせてなめらかに大きくなって画面全体を埋め、上へ戻すと再び縮むようにしてください。
周りのレイアウトを押し動かさずに拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はズームせず最終サイズで表示してください。Ken Burns Effect (ケンバーンズエフェクト)
別名 Slow pan and zoom, Ken Burns, Kenburns
静止画が枠の中でゆっくりズームしながら移動します。
使いどころ
ヒーローのスライドショー、背景
[適用する場所]にケンバーンズエフェクト(Ken Burns Effect)を追加してください。スローパン&ズーム(slow pan and zoom)とも呼ばれます。
各画像は表示中にごくゆっくりと一方向だけにズームしながら流れ、次の画像へクロスフェードし、次の画像は別の方向へ動くようにしてください。穏やかに、途切れなく。
どの瞬間も画像が枠全体を覆って端が見えないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は画像を静止させてください。Scrollのほかのモーション
ABC
A
B
C
中をスクロールしてください
Pinning (ピン留め)
別名 Pinned Section, Sticky Section, Scroll Pin
一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。
使いどころ
スクロール連動のストーリーテリング、機能紹介
[適用する場所]にピン留め(Pinning)のスクロール効果を追加してください。ピン留めセクション(pinned section)、スティッキーセクション(sticky section)とも呼ばれます。
横のコンテンツがスクロールで流れていく間、1つのパネルはその場に固定し、読んでいるステップに合わせて切り替え、セクションが終わったら固定を外してください。
スクロールを乗っ取るのではなくネイティブのsticky配置を優先し、小さな画面では固定パネルがなくても各ステップが読みやすいようにしてください。中をスクロールしてください
Scroll Progress Indicator (スクロールプログレスインジケーター)
別名 Reading Progress Bar, Progress Bar
ページや記事をスクロールするにつれて、バーやリングが満たされていきます。
使いどころ
記事、長いページ
[適用する場所]にスクロールプログレスインジケーター(Scroll Progress Indicator)を追加してください。読書進捗バー(reading progress bar)とも呼ばれます。
上端の細いバーが、読み進めた量に合わせて左から右へ伸び、最後まで来たら全幅になるようにしてください。
イージングの遅れなしでスクロール位置に直接連動させ、コンテンツを覆わないようにしてください。A
B
C
D
中をスクロールしてください
Scroll Snap (スクロールスナップ)
別名 Scroll Snapping, Snap Scrolling
スクロールがスライドやセクションなど、決められたスナップ位置にぴたりと止まります。
使いどころ
カルーセル、全画面セクション、ギャラリー
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。