プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクロールズーム(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)にしている場合は画像を静止させてください。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)にしている場合は自然な静止状態を表示してください。マウスを乗せてください
Hover Zoom (ホバーズーム)
別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。
使いどころ
製品カード、サムネイル
[適用する場所]にホバーズーム(Hover Zoom)エフェクトを追加してください。イメージズームオンホバー(image zoom on hover)、ズームパン(zoom-pan)とも呼ばれます。
ポインターが画像に乗っている間は、枠の大きさはそのままで画像が枠の中でゆっくりなめらかに拡大し、離れたらなめらかに戻るようにしてください。
画像は枠で切り抜いてレイアウトからはみ出さないようにし、キーボードフォーカスでも同じズームを出してください。A
B
C
D
中をスクロールしてください
Parallax (パララックス)
別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。
使いどころ
ヒーローの背景、ランディングページ
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。Scrollのほかのモーション
中をスクロールしてください
Hide on Scroll Header (スクロールで隠れるヘッダー)
別名 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
下にスクロールするとヘッダーが隠れ、上にスクロールすると再び現れます。
使いどころ
モバイルや長いページのナビゲーションバー
[適用する場所]にスクロールで隠れるヘッダー(Hide on Scroll Header)を追加してください。ヘッドルーム(headroom)、自動で隠れるナビバー(auto-hide navbar)とも呼ばれます。
下にスクロールするとヘッダーが上へスライドして隠れ、少しでも上にスクロールすると戻ってくるようにしてください。素早くなめらかに、距離ではなく方向に反応させます。
ページの一番上では常に表示し、スクロールのわずかなぶれは無視し、ヘッダー内の要素にキーボードフォーカスがある間は表示したままにしてください。A
B
C
D
E
中をスクロールしてください
Horizontal Scroll Section (横スクロールセクション)
別名 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
縦スクロールに合わせて、固定されたパネルの列が横に動きます。
使いどころ
ギャラリー、ポートフォリオ、タイムライン
[適用する場所]に横スクロールセクション(Horizontal Scroll Section)を追加してください。horizontal scrolling、scroll-jacked horizontal galleryとも呼ばれます。
セクションが上端に来たら固定され、下へのスクロールでパネルの列が横に動き、最後のパネルが見えたら固定が外れるようにしてください。
横の動きはスクロール位置に直接連動させて戻すと逆に動くようにし、小さな画面やユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は、普通にスワイプできる横並びに切り替えてください。