プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクロールで隠れるヘッダー(Hide on Scroll Header)を追加してください。ヘッドルーム(headroom)、自動で隠れるナビバー(auto-hide navbar)とも呼ばれます。
下にスクロールするとヘッダーが上へスライドして隠れ、少しでも上にスクロールすると戻ってくるようにしてください。素早くなめらかに、距離ではなく方向に反応させます。
ページの一番上では常に表示し、スクロールのわずかなぶれは無視し、ヘッダー内の要素にキーボードフォーカスがある間は表示したままにしてください。似ているモーション
中をスクロールしてください
Sticky Header Shrink (スティッキーヘッダーシュリンク)
別名 Shrinking Header, Shrink on Scroll
下へスクロールすると、固定ヘッダーの高さやサイズが小さくなります。
使いどころ
ナビゲーションバー
[適用する場所]にスティッキーヘッダーシュリンク(Sticky Header Shrink)を追加してください。シュリンキングヘッダー(shrinking header)、シュリンクオンスクロール(shrink on scroll)とも呼ばれます。
ヘッダーは上部に固定したまま、少し下へスクロールしたらロゴを小さくした細いバーへなめらかに縮み、一番上に戻ったら元の大きさに戻るようにしてください。
ヘッダーのサイズが変わる間、下のコンテンツがずれないようにしてください。A
Slide Out (スライドアウト)
別名 Slide Out Up, Slide Out Down
要素がコンテナの端の外へすべり出て消えます。
使いどころ
ドロワーやパネルを閉じるとき
[適用する場所]にスライドアウト(Slide Out)の退場アニメーションを追加してください。slide out up、slide out down とも呼ばれます。
要素が完全に不透明なままコンテナの端の外へすべり出て消えるようにしてください。素早く、去るにつれて加速させてください。
コンテナの端で切り取り、見えなくなったらキーボードやスクリーンリーダーからも隠し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに非表示にしてください。A
Slide In (スライドイン)
別名 Slide In Up, Slide In Down, Slide In Left, Slide In Right
要素がコンテナの端の外側から定位置まで、フェードせずにすべり込みます。
使いどころ
ドロワー、サイドパネル、バナー
[適用する場所]にスライドイン(Slide In)の登場アニメーションを追加してください。slide in left、slide in right、slide in up、slide in down とも呼ばれます。
要素がコンテナの端の外側から定位置まですべり込み、その間ずっと完全に不透明のままにしてください。素早く、弾まずになめらかに減速させてください。
外にある間は隣の要素に重なったりスクロールバーが出たりしないようコンテナの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からその位置に表示してください。Scrollのほかのモーション
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)にしている場合は、普通にスワイプできる横並びに切り替えてください。A
B
C
D
中をスクロールしてください
Parallax (パララックス)
別名 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
スクロールに合わせてレイヤーが異なる速さで動き、奥行きを感じさせます。
使いどころ
ヒーローの背景、ランディングページ
[適用する場所]にパララックス(Parallax)のスクロール効果を追加してください。パララックススクロール(parallax scrolling)、パララックスレイヤー(parallax layers)とも呼ばれます。
ページをスクロールすると背景レイヤーがコンテンツよりゆっくり動き、遠いレイヤーほど動きを小さくして、控えめな奥行きを出してください。
遅れなくスクロール位置に連動させ、テキストは通常速度のレイヤーに置き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は効果をオフにしてください。ABC
A
B
C
中をスクロールしてください
Pinning (ピン留め)
別名 Pinned Section, Sticky Section, Scroll Pin
一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。
使いどころ
スクロール連動のストーリーテリング、機能紹介
[適用する場所]にピン留め(Pinning)のスクロール効果を追加してください。ピン留めセクション(pinned section)、スティッキーセクション(sticky section)とも呼ばれます。
横のコンテンツがスクロールで流れていく間、1つのパネルはその場に固定し、読んでいるステップに合わせて切り替え、セクションが終わったら固定を外してください。
スクロールを乗っ取るのではなくネイティブのsticky配置を優先し、小さな画面では固定パネルがなくても各ステップが読みやすいようにしてください。