プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキストリビール(Text Reveal)エフェクトを追加してください。スクロールテキストリビール(scroll text reveal)、単語ごとのリビール(word-by-word reveal)とも呼ばれます。
段落は最初薄く表示し、スクロールに合わせて単語が一つずつはっきりした濃さまで明るくなるよう、スクロール位置に連動させてください。
上へ戻すと単語は再び薄くなるようにし、薄さに関係なく段落全体をスクリーンリーダーで読めるようにしてください。似ているモーション
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (テキストジェネレート)
別名 Text Generate Effect
ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。
使いどころ
AI風のイントロ文
[適用する場所]にテキストジェネレート(Text Generate)エフェクトを追加してください。
単語が一つずつフェードインし、それぞれのやわらかなぼかしが晴れていくことで、テキストが生成されているように見せてください。一定のペースで落ち着いた動きにしてください。
読み込み時に一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。ABC DEFGHI JKLMNO PQR
中をスクロールしてください
Sticky Text Fade (スティッキーテキストフェード)
別名 Sticky Scroll Text Opacity Fade
テキストは固定されたまま、スクロールの進み具合に合わせて各行がフェードイン・フェードアウトします。
使いどころ
スクロールテリング
[適用する場所]にスティッキーテキストフェード(Sticky Text Fade)のエフェクトを追加してください。スティッキースクロールテキストオパシティフェード(sticky scroll text opacity fade)とも呼ばれます。
セクションをスクロールしている間、テキストブロックはその場に固定され、各行がスクロールの進み具合に合わせて1行ずつフェードイン・フェードアウトするようにしてください。
フェードはスクロール位置に直接連動させて戻すと逆になるようにし、不透明度に関係なくすべての行をスクリーンリーダーが読めるようにしてください。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)にしている場合は自然な静止状態を表示してください。A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
中をスクロールしてください
Scrolling Letters (スクローリングレター)
別名 On-Scroll Letter Animations
ユーザーがセクションをスクロールするにつれて、タイトルの文字が順番に入れ替わったり動いたりします。
使いどころ
セクションインジケーター
[適用する場所]にスクローリングレター(Scrolling Letters)を追加してください。オンスクロールレターアニメーション(on-scroll letter animations)とも呼ばれます。
ユーザーがセクションをスクロールするにつれて、タイトルの文字が左から右へ1文字ずつ次の文字へ回転して切り替わり、スクロール位置に直接連動するようにしてください。
上へ戻すと逆に回転して戻り、スクリーンリーダーには現在のタイトルを通常のテキストとして渡してください。Textのほかのモーション
ABCDEFGHIJKL
ポインターを動かしてください
Text Reveal Card (テキストリビールカード)
別名 Spotlight Text Reveal
カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。
使いどころ
機能紹介カード
[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
マウスを乗せてください
Text Scramble (テキストスクランブル)
別名 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
テキストがランダムな文字に置き換わって切り替わり続け、徐々に最終的な単語に落ち着きます。
使いどころ
テック系のヒーロータイトル、リンクのホバー
[適用する場所]にテキストスクランブル(Text Scramble)のホバーエフェクトを追加してください。テキストデコード(text decode)、暗号化テキスト(encrypted text)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。ABCDEF
ポインターを動かしてください
Text Tilt (テキストチルト)
別名 Perspective Text Tilt
テキストがマウスの位置を追って3Dパースペクティブで傾きます。
使いどころ
ヒーロー見出し
[適用する場所]にテキストチルト(Text Tilt)エフェクトを追加してください。パースペクティブテキストチルト(perspective text tilt)とも呼ばれます。
テキストがポインターの動きになめらかに追従して3Dでやさしくポインター側へ傾き、ポインターが離れるとゆっくり平らに戻るようにしてください。
傾きは控えめにしてテキストを読みやすく保ち、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は平らなままにしてください。