プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクロールテキストマーキー(Text Marquee on Scroll)を追加してください。scroll text marquee、スクロールベロシティテキスト(scroll velocity text)とも呼ばれます。
ページを下へスクロールすると大きなテキストの行が横へスライドし、1行おきに逆方向へ動き、上へ戻すと元へ戻るようにしてください。
動きはスクロール位置に連動させ、長い行で横スクロールバーが出ないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。似ているモーション
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
- M
- N
Marquee (マーキー)
別名 Ticker, Infinite Scroll Text
1行のコンテンツが途切れることなく横方向に無限ループで流れ続けます。
使いどころ
ロゴウォール、お知らせの帯、キーワードバナー、ニュースティッカー
[適用する場所]にマーキー(Marquee)を追加してください。横方向に無限に流れる帯で、ティッカー(ticker)とも呼ばれます。
コンテンツが右から左へゆっくり一定の速度で流れ、つなぎ目が見えないように途切れなくループさせてください。
マウスを乗せたら止まり、モーションを減らす設定(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)にしている場合は、普通にスワイプできる横並びに切り替えてください。ABCABCABCABCABC
中をスクロールしてください
Text Repetition (テキストリピティション)
別名 Repeated Text Scroll
単語が何枚も重なったコピーに複製され、スクロールに合わせてずれていきます。
使いどころ
ポートフォリオのタイトル
[適用する場所]にテキストリピティション(Text Repetition)エフェクトを追加してください。リピートテキストスクロール(repeated text scroll)とも呼ばれます。
単語を薄いアウトラインのコピーに重ねて複製し、スクロールに合わせて背後から広がり、上へスクロールすると元に重なるようにしてください。
広がりはスクロール位置に直接連動させ、余分なコピーはスクリーンリーダーから隠して単語が一度だけ読まれるようにしてください。ABCABCABC
中をスクロールしてください
Sliced Text (スライステキスト)
別名 On-Scroll Sliced Text
見出しが横方向のスライスに切り分けられ、スクロールに合わせて互いに左右へずれていきます。
使いどころ
エディトリアルなヒーロー
[適用する場所]にスライステキスト(Sliced Text)のエフェクトを追加してください。オンスクロールスライステキスト(on-scroll sliced text)とも呼ばれます。
大きな見出しを横方向のスライスに切り分け、スクロールに合わせて互いに左右へずれるようにし、最初はひとつの単語としてそろった状態にしてください。
ずれはスクロール位置に直接連動させて戻すと逆に動くようにし、スクリーンリーダーには見出しをひとつの読めるテキストとして渡してください。Scrollのほかのモーション
A
中をスクロールしてください
Zoom on Scroll (スクロールズーム)
別名 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
スクロールに合わせて、要素やシーンが拡大・縮小します。
使いどころ
ヒーローのイントロ、画像の拡大表示
[適用する場所]にスクロールズーム(Zoom on Scroll)の効果を追加してください。scroll zoom、スケールオンスクロール(scale on scroll)とも呼ばれます。
セクションが画面に留まっている間、要素が小さなカードからスクロールに合わせてなめらかに大きくなって画面全体を埋め、上へ戻すと再び縮むようにしてください。
周りのレイアウトを押し動かさずに拡大し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はズームせず最終サイズで表示してください。中をスクロールしてください
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)とも呼ばれます。
下にスクロールするとヘッダーが上へスライドして隠れ、少しでも上にスクロールすると戻ってくるようにしてください。素早くなめらかに、距離ではなく方向に反応させます。
ページの一番上では常に表示し、スクロールのわずかなぶれは無視し、ヘッダー内の要素にキーボードフォーカスがある間は表示したままにしてください。