プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はめくらずに最終テキストを表示してください。似ているモーション
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (オドメーター)
別名 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数値が変わると、各桁が縦に回転して新しい値になります。
使いどころ
リアルタイムカウンター、価格表示
[適用する場所]にオドメーター(Odometer)の数字アニメーションを追加してください。ローリングナンバー(rolling numbers)、スロットマシン数字(slot-machine digits)とも呼ばれます。
値が変わったら、各桁が常に前方向へ縦に回転して新しい数字になり、桁ごとに少し時間差をつけ、最後に小さく落ち着くようにしてください。
数値全体がずれないようすべての桁を同じ幅にし、スクリーンリーダーには最終値だけを伝えてください。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)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。AGBHCIDJEKFL
マウスを乗せてください
Text 3D Flip (テキスト3Dフリップ)
別名 3D Flip Text Reveal
文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。
使いどころ
ホバーリンク、見出し
[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。- %
Number Ticker (カウントアップ)
別名 Count Up, Animated Counter, Number Counter, countUp
数字が見えた時点で、開始値から目標値までカウントします。
使いどころ
統計、KPIブロック
[適用する場所]にカウントアップ(Number Ticker)を追加してください。カウントアップ(count up)、アニメーテッドカウンター(animated counter)とも呼ばれます。
数字が画面に入ったら、ゼロから目標値までカウントし、最初は速く、着地にかけて穏やかに減速するようにしてください。
周りががたつかないよう等幅の数字を使い、カウントは一度だけにし、スクリーンリーダーとモーションを減らす設定(prefers-reduced-motion)のユーザーには最終値をすぐに示してください。Textのほかのモーション
ABCDEF
Squiggly Text (スクイグリーテキスト)
別名 Wobbly Text, Turbulence Text
SVGのディスプレイスメントフィルターで、文字の輪郭が手描きのように揺らぎます。
使いどころ
ラフスケッチ風や遊び心のある見出し
[適用する場所]にスクイグリーテキスト(Squiggly Text)のエフェクトを追加してください。ウォブリーテキスト(wobbly text)、タービュランステキスト(turbulence text)とも呼ばれます。
文字の輪郭が、1秒間に何度も手で描き直しているようにわずかに揺らぐようにしてください。なめらかな波ではなく、控えめで小刻みに震える感じです。
文字は読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。ABC DEFGHI JKLMNO PQR
中をスクロールしてください
Sticky Text Fade (スティッキーテキストフェード)
別名 Sticky Scroll Text Opacity Fade
テキストは固定されたまま、スクロールの進み具合に合わせて各行がフェードイン・フェードアウトします。
使いどころ
スクロールテリング
[適用する場所]にスティッキーテキストフェード(Sticky Text Fade)のエフェクトを追加してください。スティッキースクロールテキストオパシティフェード(sticky scroll text opacity fade)とも呼ばれます。
セクションをスクロールしている間、テキストブロックはその場に固定され、各行がスクロールの進み具合に合わせて1行ずつフェードイン・フェードアウトするようにしてください。
フェードはスクロール位置に直接連動させて戻すと逆になるようにし、不透明度に関係なくすべての行をスクリーンリーダーが読めるようにしてください。Stroke Text Draw (ストロークテキストドロー)
別名 Draw In Text, Animated Stroke Text
文字の輪郭が線として描かれてから、塗りが現れます。
使いどころ
ロゴ、ヒーローエリアの単語
[適用する場所]にストロークテキストドロー(Stroke Text Draw)のエフェクトを追加してください。ドローインテキスト(draw in text)、アニメーテッドストロークテキスト(animated stroke text)とも呼ばれます。
文字の輪郭がなめらかに描かれていき、輪郭が描き終わったら塗りがフェードインするようにしてください。
読み込み時に一度だけ再生し、単語は実際のテキストとしてアクセシブルに保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から塗られたテキストを表示してください。