プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスクローリングレター(Scrolling Letters)を追加してください。オンスクロールレターアニメーション(on-scroll letter animations)とも呼ばれます。
ユーザーがセクションをスクロールするにつれて、タイトルの文字が左から右へ1文字ずつ次の文字へ回転して切り替わり、スクロール位置に直接連動するようにしてください。
上へ戻すと逆に回転して戻り、スクリーンリーダーには現在のタイトルを通常のテキストとして渡してください。似ているモーション
ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。ABCDEFGHIJKLMNOPQRSTUVWXYZ
中をスクロールしてください
Text Reveal (テキストリビール)
別名 Scroll Text Reveal, Word-by-word Reveal
段落の単語が、スクロールに合わせて薄い状態から完全な不透明へと変わります。
使いどころ
マニフェストや導入の段落
[適用する場所]にテキストリビール(Text Reveal)エフェクトを追加してください。スクロールテキストリビール(scroll text reveal)、単語ごとのリビール(word-by-word reveal)とも呼ばれます。
段落は最初薄く表示し、スクロールに合わせて単語が一つずつはっきりした濃さまで明るくなるよう、スクロール位置に連動させてください。
上へ戻すと単語は再び薄くなるようにし、薄さに関係なく段落全体をスクリーンリーダーで読めるようにしてください。ABCABCABC
中をスクロールしてください
Sliced Text (スライステキスト)
別名 On-Scroll Sliced Text
見出しが横方向のスライスに切り分けられ、スクロールに合わせて互いに左右へずれていきます。
使いどころ
エディトリアルなヒーロー
[適用する場所]にスライステキスト(Sliced Text)のエフェクトを追加してください。オンスクロールスライステキスト(on-scroll sliced text)とも呼ばれます。
大きな見出しを横方向のスライスに切り分け、スクロールに合わせて互いに左右へずれるようにし、最初はひとつの単語としてそろった状態にしてください。
ずれはスクロール位置に直接連動させて戻すと逆に動くようにし、スクリーンリーダーには見出しをひとつの読めるテキストとして渡してください。Textのほかのモーション
ABC DEFGH
Shimmer Text (シマーテキスト)
別名 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
明るいハイライトが文字の上を繰り返し横切ります。
使いどころ
バッジ、お知らせ用のピル
[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。ABCDEFGHIJKLMNOP
Spinning Text (スピニングテキスト)
別名 Circular Text, Text on Circle
円に沿って配置したテキストが、途切れなく回転し続けます。
使いどころ
回転するバッジ、スタンプ
[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。