プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクロールスナップ(Scroll Snap)を追加してください。スクロールスナッピング(scroll snapping)、スナップスクロール(snap scrolling)とも呼ばれます。
スクロールが止まったら、中途半端な位置で止まらず、最も近いセクションの端にきれいに揃うようにしてください。
ホイール・タッチ・キーボードのスクロールがそのまま使えるようブラウザ標準のスナップを使い、画面より高いコンテンツも最後まで読めるようにしてください。似ているモーション
A
B
C
クリックしてください
Carousel Slide (カルーセルスライド)
別名 Slider, Swipe carousel, Scroll-snap carousel
スライドが表示枠の中を横に移動し、1枚ずつぴたりと位置に収まります。
使いどころ
ヒーローバナー、商品ギャラリー
[適用する場所]にカルーセルスライド(Carousel Slide)を追加してください。スライダー(slider)、スワイプカルーセル(swipe carousel)とも呼ばれます。
1ステップごとに列を横にスライドさせ、次のスライドが中央にぴたりと収まるようにしてください。なめらかに減速し、両端には隣のスライドが少しのぞき、位置を示すドットも一緒に動きます。
1枚ずつ移動させ、ボタンと矢印キーに加えてタッチのスワイプにも対応し、操作ボタンにはスクリーンリーダー用のラベルを付けてください。中をスクロールしてください
Smooth Scroll (スムーススクロール)
別名 Smooth Scrolling, Inertia Scroll
スクロールやアンカーへのジャンプが、急に動かずイージングでなめらかに移動します。
使いどころ
アンカーナビゲーション、上質感のあるページ
[適用する場所]にスムーススクロール(Smooth Scroll)を追加してください。スムーススクローリング(smooth scrolling)、慣性スクロール(inertia scroll)とも呼ばれます。
スクロールやアンカーへのジャンプが、カクカク動かずになめらかに滑ってふわっと止まるようにしてください。重く遅れる感じではなく、軽く反応のよい感触にします。
キーボードスクロール、スクロールバー、ページ内検索などの標準動作は残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスムージングをオフにしてください。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
中をスクロールしてください
Stacking Cards (スタッキングカード)
別名 Sticky Stacking Cards, Card Stack Scroll
スクロールするとカードが上部に固定されて次々と重なり、前のカードが少し縮むことが多いです。
使いどころ
機能紹介リスト、ポートフォリオ
[適用する場所]にスタッキングカード(Stacking Cards)を追加してください。スティッキースタッキングカード(sticky stacking cards)、カードスタックスクロール(card stack scroll)とも呼ばれます。
スクロールすると各カードが上部付近に固定され、次のカードがその上に滑り込み、下のカードは少しずつ縮んで、きれいな束が積み上がるようにしてください。
前のカードの端が細く見えるように残し、セクションが終わる前に最後のカードが所定の位置まで届く余白を確保してください。Scrollのほかのモーション
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)にしている場合は自然な静止状態を表示してください。中をスクロールしてください
Scroll-Triggered Animation (スクロールトリガーアニメーション)
別名 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
要素がビューポートに入ったり出たりしたときに、アニメーションが一度再生されます。
使いどころ
フェードインするセクション、遅延表示
[適用する場所]にスクロールトリガーアニメーション(Scroll-Triggered Animation)を追加してください。スクロールリビール(reveal on scroll)、アニメートオンスクロール(animate on scroll)とも呼ばれます。
各要素が画面に入ったときに一度だけ、フェードインしながら下から所定の位置へ上がるようにしてください。スクロール位置には追従させず、独自の素早くなめらかなテンポで再生します。
スクリプトが読み込めなくてもコンテンツが見えるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はすぐに表示してください。