プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクロールトリガーアニメーション(Scroll-Triggered Animation)を追加してください。スクロールリビール(reveal on scroll)、アニメートオンスクロール(animate on scroll)とも呼ばれます。
各要素が画面に入ったときに一度だけ、フェードインしながら下から所定の位置へ上がるようにしてください。スクロール位置には追従させず、独自の素早くなめらかなテンポで再生します。
スクリプトが読み込めなくてもコンテンツが見えるようにし、ユーザーがモーションを減らす設定(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)にしている場合は自然な静止状態を表示してください。Fade Up (フェードアップ)
別名 Fade In Up, Reveal on Scroll
要素が少し浮き上がりながらフェードインし、所定の位置に落ち着くように見えます。
使いどころ
スクロールで現れるセクション見出し、カード、画像
[適用する場所]にフェードアップ(Fade Up)の登場アニメーションを追加してください。フェードインアップ(fade-in-up)、スクロールリビール(reveal on scroll)とも呼ばれます。
要素が初めて画面に入ったとき、少し浮き上がりながらフェードインするようにしてください。控えめで素早く、弾むような動きは不要です。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。Stagger (スタッガー)
別名 Staggered Animation, Cascade
グループ内の項目が少しずつ遅れて順番に動き、一度に現れるのではなく波のように連なります。
使いどころ
リスト、グリッド、ナビゲーションメニュー、検索結果
[適用する場所]にスタッガー(Stagger)アニメーションを追加してください。スタッガードアニメーション(staggered animation)、カスケード(cascade)とも呼ばれます。
項目が短く均等な間隔で一つずつ順番に浮き上がって現れ、一度にではなく素早い波のように見えるようにしてください。
項目が多くても全体が短く終わるようにし、画面に入ったときに一度だけ再生し、モーションを減らす設定(prefers-reduced-motion)の場合は動きなしで表示してください。ABCDEFGHIJKLMNOPQRSTUVWXYZ
中をスクロールしてください
Text Reveal (テキストリビール)
別名 Scroll Text Reveal, Word-by-word Reveal
段落の単語が、スクロールに合わせて薄い状態から完全な不透明へと変わります。
使いどころ
マニフェストや導入の段落
[適用する場所]にテキストリビール(Text Reveal)エフェクトを追加してください。スクロールテキストリビール(scroll text reveal)、単語ごとのリビール(word-by-word reveal)とも呼ばれます。
段落は最初薄く表示し、スクロールに合わせて単語が一つずつはっきりした濃さまで明るくなるよう、スクロール位置に連動させてください。
上へ戻すと単語は再び薄くなるようにし、薄さに関係なく段落全体をスクリーンリーダーで読めるようにしてください。Scrollのほかのモーション
中をスクロールしてください
Smooth Scroll (スムーススクロール)
別名 Smooth Scrolling, Inertia Scroll
スクロールやアンカーへのジャンプが、急に動かずイージングでなめらかに移動します。
使いどころ
アンカーナビゲーション、上質感のあるページ
[適用する場所]にスムーススクロール(Smooth Scroll)を追加してください。スムーススクローリング(smooth scrolling)、慣性スクロール(inertia scroll)とも呼ばれます。
スクロールやアンカーへのジャンプが、カクカク動かずになめらかに滑ってふわっと止まるようにしてください。重く遅れる感じではなく、軽く反応のよい感触にします。
キーボードスクロール、スクロールバー、ページ内検索などの標準動作は残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はスムージングをオフにしてください。A
B
C
D
中をスクロールしてください
Stacking Cards (スタッキングカード)
別名 Sticky Stacking Cards, Card Stack Scroll
スクロールするとカードが上部に固定されて次々と重なり、前のカードが少し縮むことが多いです。
使いどころ
機能紹介リスト、ポートフォリオ
[適用する場所]にスタッキングカード(Stacking Cards)を追加してください。スティッキースタッキングカード(sticky stacking cards)、カードスタックスクロール(card stack scroll)とも呼ばれます。
スクロールすると各カードが上部付近に固定され、次のカードがその上に滑り込み、下のカードは少しずつ縮んで、きれいな束が積み上がるようにしてください。
前のカードの端が細く見えるように残し、セクションが終わる前に最後のカードが所定の位置まで届く余白を確保してください。中をスクロールしてください
Sticky Header Shrink (スティッキーヘッダーシュリンク)
別名 Shrinking Header, Shrink on Scroll
下へスクロールすると、固定ヘッダーの高さやサイズが小さくなります。
使いどころ
ナビゲーションバー
[適用する場所]にスティッキーヘッダーシュリンク(Sticky Header Shrink)を追加してください。シュリンキングヘッダー(shrinking header)、シュリンクオンスクロール(shrink on scroll)とも呼ばれます。
ヘッダーは上部に固定したまま、少し下へスクロールしたらロゴを小さくした細いバーへなめらかに縮み、一番上に戻ったら元の大きさに戻るようにしてください。
ヘッダーのサイズが変わる間、下のコンテンツがずれないようにしてください。