プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にスティッキーテキストフェード(Sticky Text Fade)のエフェクトを追加してください。スティッキースクロールテキストオパシティフェード(sticky scroll text opacity fade)とも呼ばれます。
セクションをスクロールしている間、テキストブロックはその場に固定され、各行がスクロールの進み具合に合わせて1行ずつフェードイン・フェードアウトするようにしてください。
フェードはスクロール位置に直接連動させて戻すと逆になるようにし、不透明度に関係なくすべての行をスクリーンリーダーが読めるようにしてください。似ているモーション
ABCDEFGHIJKLMNOPQRSTUVWXYZ
中をスクロールしてください
Text Reveal (テキストリビール)
別名 Scroll Text Reveal, Word-by-word Reveal
段落の単語が、スクロールに合わせて薄い状態から完全な不透明へと変わります。
使いどころ
マニフェストや導入の段落
[適用する場所]にテキストリビール(Text Reveal)エフェクトを追加してください。スクロールテキストリビール(scroll text reveal)、単語ごとのリビール(word-by-word reveal)とも呼ばれます。
段落は最初薄く表示し、スクロールに合わせて単語が一つずつはっきりした濃さまで明るくなるよう、スクロール位置に連動させてください。
上へ戻すと単語は再び薄くなるようにし、薄さに関係なく段落全体をスクリーンリーダーで読めるようにしてください。ABC
A
B
C
中をスクロールしてください
Pinning (ピン留め)
別名 Pinned Section, Sticky Section, Scroll Pin
一定のスクロール区間のあいだ要素がその場に固定され、そのあいだにほかのコンテンツやアニメーションが進みます。
使いどころ
スクロール連動のストーリーテリング、機能紹介
[適用する場所]にピン留め(Pinning)のスクロール効果を追加してください。ピン留めセクション(pinned section)、スティッキーセクション(sticky section)とも呼ばれます。
横のコンテンツがスクロールで流れていく間、1つのパネルはその場に固定し、読んでいるステップに合わせて切り替え、セクションが終わったら固定を外してください。
スクロールを乗っ取るのではなくネイティブのsticky配置を優先し、小さな画面では固定パネルがなくても各ステップが読みやすいようにしてください。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)にしている場合は自然な静止状態を表示してください。Textのほかのモーション
Stroke Text Draw (ストロークテキストドロー)
別名 Draw In Text, Animated Stroke Text
文字の輪郭が線として描かれてから、塗りが現れます。
使いどころ
ロゴ、ヒーローエリアの単語
[適用する場所]にストロークテキストドロー(Stroke Text Draw)のエフェクトを追加してください。ドローインテキスト(draw in text)、アニメーテッドストロークテキスト(animated stroke text)とも呼ばれます。
文字の輪郭がなめらかに描かれていき、輪郭が描き終わったら塗りがフェードインするようにしてください。
読み込み時に一度だけ再生し、単語は実際のテキストとしてアクセシブルに保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から塗られたテキストを表示してください。AGBHCIDJEKFL
マウスを乗せてください
Text 3D Flip (テキスト3Dフリップ)
別名 3D Flip Text Reveal
文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。
使いどころ
ホバーリンク、見出し
[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。ABCDEFGHIJABCDEFGHIJ
Text Distortion (テキストディストーション)
別名 Organic Text Distortion
スクロールやポインターの動きに合わせて、テキストが有機的にゆがみ、波打ちます。
使いどころ
実験的なポートフォリオ
[適用する場所]にテキストディストーション(Text Distortion)のエフェクトを追加してください。オーガニックテキストディストーション(organic text distortion)とも呼ばれます。
1行のテキストが横へ途切れなく流れながら、揺れる水越しに見ているように有機的にゆがみ波打ち、その流れはユーザーのスクロールで動くようにしてください。
ゆがみは文字が読める程度に軽くし、処理の遅い端末でもなめらかに動くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。