Text

グラデーションで塗られたテキストの色が、絶えず移り変わったり流れたりします。

[適用する場所]にグラデーションテキストアニメーション(Animated Gradient Text)の効果を追加してください。オーロラテキスト(aurora text)、レインボーテキストスイープ(rainbow text sweep)とも呼ばれます。
文字をグラデーションで塗り、その色がテキスト上をゆっくりなめらかに流れ、つなぎ目なく無限にループするようにしてください。
背景に対してどの瞬間も文字が読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は色を止めてください。

テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。

[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。

テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。

[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。

テキストが静的な文章ではなく、動くグラフィック要素として拡大縮小・移動・回転します。

[適用する場所]にキネティックタイポグラフィ(Kinetic Typography)を追加してください。キネティックテキスト(kinetic text)とも呼ばれます。
大きな文字を繰り返した行が、1行ごとに逆方向へゆっくり一定のペースで横に流れ、言葉そのものが動くグラフィックになるようにしてください。
各行はつなぎ目なくループさせ、スクリーンリーダーには一度だけ読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。

ホバーで文字が飛び散って戻ったり、登場時に外側へはじけたりします。

[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。

文字の背後にある縞模様やずらした影が、一方向に動きます。

[適用する場所]にラインシャドウテキスト(Line Shadow Text)の効果を追加してください。テキストシャドウアニメーション(text shadow animation)、ダンシングシャドウ(dancing shadow)とも呼ばれます。
文字の背後で、細い斜めストライプでできたずらした影がゆっくり途切れなくスライドし、文字自体は動かずくっきりしたままにしてください。
ストライプの動きはつなぎ目なくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は影を止めてください。

文字の中に、波打ちながら水位が上がる液体が満ちていきます。

[適用する場所]にリキッドフィルテキスト(Liquid Fill Text)の効果を追加してください。ウォーターフィルテキスト(water fill text)とも呼ばれます。
輪郭だけの文字に液体が満ち、波打つ水面が横へ流れながら水位がゆっくり上下する、やわらかく途切れないループにしてください。
スクリーンリーダー向けに単語は実際のテキストとして残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は液体を一定の水位で止めてください。

テキストが見えない境界線の裏から滑り上がり、何もないところから現れるように見えます。

[適用する場所]にマスクリビール(Mask Reveal)のテキスト登場エフェクトを追加してください。ラインマスクリビール(line mask reveal)、テキストマスキング(text masking)とも呼ばれます。
各行が見えない境界線の裏から滑り上がり、何もないところから現れるように、1行ずつ順番に、素早くなめらかに、弾まずに表示されるようにしてください。
テキストがスクロールで画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしですぐに表示してください。

緑色の文字が、映画『マトリックス』のコードの雨のように列になって降り注ぎます。

[適用する場所]にマトリックステキスト(Matrix Text)のエフェクトを追加してください。デジタルレインテキスト(digital rain text)とも呼ばれます。
文字の列がそれぞれ少しずつ違う速さで一定に降り続け、先頭の文字は明るく光り、その後ろに尾がフェードアウトしていくようにしてください。
スクリーンリーダーからは隠した装飾として扱い、軽量に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。

文字が溶けるように、しずくを垂らしながら下へ伸びていきます。

[適用する場所]にメルティングテキスト(Melting Text)のエフェクトを追加してください。
文字がゆっくり下へたわみ、その下にしずくが伸びて溶けていくように見せ、最後は溶けた形のまま静止させてください。
テキストが画面に入ったときに一度だけ再生し、最後に単語が読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしにしてください。

ひとつの単語がぼやけながら、同じ位置で次の単語へ溶け込むように変わります。

[適用する場所]にモーフィングテキスト(Morphing Text)のエフェクトを追加してください。テキストモーフ(text morph)とも呼ばれます。
ひとつの単語が同じ位置でぼやけ、とろりと柔らかく混ざり合いながら次の単語へ溶け込み、次に切り替わる前に少し静止するようにしてください。
単語を途切れなく順に切り替え、スクリーンリーダーには通常のテキストとして読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。

テキストがネオン管のように光り、ちらついたり脈打ったりします。

[適用する場所]にネオングローテキスト(Neon Glow Text)のエフェクトを追加してください。ネオンサインフリッカー(neon sign flicker)、グローイングテキスト(glowing text)とも呼ばれます。
テキストがネオン管のように柔らかく安定した光で輝き、ときどき本物の看板のように一瞬消えるようにしてください。
速い点滅は一部のユーザーに害を与えることがあるので、ちらつきは速くせずたまに起こる程度にし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を一定に保ってください。

ユーザーがセクションをスクロールするにつれて、タイトルの文字が順番に入れ替わったり動いたりします。

[適用する場所]にスクローリングレター(Scrolling Letters)を追加してください。オンスクロールレターアニメーション(on-scroll letter animations)とも呼ばれます。
ユーザーがセクションをスクロールするにつれて、タイトルの文字が左から右へ1文字ずつ次の文字へ回転して切り替わり、スクロール位置に直接連動するようにしてください。
上へ戻すと逆に回転して戻り、スクリーンリーダーには現在のタイトルを通常のテキストとして渡してください。

明るいハイライトが文字の上を繰り返し横切ります。

[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。

見出しが横方向のスライスに切り分けられ、スクロールに合わせて互いに左右へずれていきます。

[適用する場所]にスライステキスト(Sliced Text)のエフェクトを追加してください。オンスクロールスライステキスト(on-scroll sliced text)とも呼ばれます。
大きな見出しを横方向のスライスに切り分け、スクロールに合わせて互いに左右へずれるようにし、最初はひとつの単語としてそろった状態にしてください。
ずれはスクロール位置に直接連動させて戻すと逆に動くようにし、スクリーンリーダーには見出しをひとつの読めるテキストとして渡してください。

円に沿って配置したテキストが、途切れなく回転し続けます。

[適用する場所]にスピニングテキスト(Spinning Text)を追加してください。サーキュラーテキスト(circular text)、テキストオンサークル(text on circle)とも呼ばれます。
文字を円周上に均等に並べ、円がゆっくり一定の速さで回り、ループの切り替わりで跳ばないようにしてください。
スクリーンリーダーにはテキストを一度だけ通常のテキストとして渡し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は回転を止めてください。

見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。

[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。

空港の発車案内板のように文字がパタパタとめくれ、目的の文字で止まります。

[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はめくらずに最終テキストを表示してください。

SVGのディスプレイスメントフィルターで、文字の輪郭が手描きのように揺らぎます。

[適用する場所]にスクイグリーテキスト(Squiggly Text)のエフェクトを追加してください。ウォブリーテキスト(wobbly text)、タービュランステキスト(turbulence text)とも呼ばれます。
文字の輪郭が、1秒間に何度も手で描き直しているようにわずかに揺らぐようにしてください。なめらかな波ではなく、控えめで小刻みに震える感じです。
文字は読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。

テキストは固定されたまま、スクロールの進み具合に合わせて各行がフェードイン・フェードアウトします。

[適用する場所]にスティッキーテキストフェード(Sticky Text Fade)のエフェクトを追加してください。スティッキースクロールテキストオパシティフェード(sticky scroll text opacity fade)とも呼ばれます。
セクションをスクロールしている間、テキストブロックはその場に固定され、各行がスクロールの進み具合に合わせて1行ずつフェードイン・フェードアウトするようにしてください。
フェードはスクロール位置に直接連動させて戻すと逆になるようにし、不透明度に関係なくすべての行をスクリーンリーダーが読めるようにしてください。

文字の輪郭が線として描かれてから、塗りが現れます。

[適用する場所]にストロークテキストドロー(Stroke Text Draw)のエフェクトを追加してください。ドローインテキスト(draw in text)、アニメーテッドストロークテキスト(animated stroke text)とも呼ばれます。
文字の輪郭がなめらかに描かれていき、輪郭が描き終わったら塗りがフェードインするようにしてください。
読み込み時に一度だけ再生し、単語は実際のテキストとしてアクセシブルに保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から塗られたテキストを表示してください。

文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。

[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。

スクロールやポインターの動きに合わせて、テキストが有機的にゆがみ、波打ちます。

[適用する場所]にテキストディストーション(Text Distortion)のエフェクトを追加してください。オーガニックテキストディストーション(organic text distortion)とも呼ばれます。
1行のテキストが横へ途切れなく流れながら、揺れる水越しに見ているように有機的にゆがみ波打ち、その流れはユーザーのスクロールで動くようにしてください。
ゆがみは文字が読める程度に軽くし、処理の遅い端末でもなめらかに動くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。

ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。

[適用する場所]にテキストジェネレート(Text Generate)エフェクトを追加してください。
単語が一つずつフェードインし、それぞれのやわらかなぼかしが晴れていくことで、テキストが生成されているように見せてください。一定のペースで落ち着いた動きにしてください。
読み込み時に一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。

マーカーのような色の帯がフレーズの上に引かれ、強調します。

[適用する場所]にテキストマーカー(Text Highlighter)エフェクトを追加してください。ハイライトマーカー(highlight marker)、マーカーアンダーライン(marker underline)とも呼ばれます。
マーカーのような色の帯が、ペンで線を引くようにキーフレーズの背後を左から右へなめらかに走るようにしてください。
フレーズがスクロールで画面に入ったときに一度だけ再生し、帯の上でもテキストが読みやすいようにし、フレーズが2行に折り返しても帯が正しく追従するようにしてください。

アウトラインの単語が、ポインターを追うかその上を横切るグラデーションで塗られたり照らされたりします。

[適用する場所]にテキストホバーエフェクト(Text Hover Effect)を追加してください。ホバーでのテキスト塗り(text fill on hover)、グラデーションアウトラインのテキストホバー(gradient outline text hover)とも呼ばれます。
単語は最初アウトラインだけで表示し、ポインターが乗っている間はベタ塗りが左から右へなめらかに広がり、ポインターが離れると引いていくようにしてください。
塗られる前のアウトラインの単語も読みやすく保ち、キーボードフォーカス時にも同じ効果を表示してください。

テキストが曲線のパスに沿って配置され、スクロールに合わせてその上を進みます。

[適用する場所]にテキストパススクロール(Text Path Scroll)エフェクトを追加してください。テキストパスカーブスクロールアニメーション(text path curve scroll animation)とも呼ばれます。
テキストが曲線の上に乗り、スクロールに合わせてその上をすべるように動かしてください。下へスクロールすると進み、上へスクロールすると戻ります。
動きは遅れなくスクロール位置に直接連動させ、スクリーンリーダーには通常のテキストとして読めるようにしてください。

単語が何枚も重なったコピーに複製され、スクロールに合わせてずれていきます。

[適用する場所]にテキストリピティション(Text Repetition)エフェクトを追加してください。リピートテキストスクロール(repeated text scroll)とも呼ばれます。
単語を薄いアウトラインのコピーに重ねて複製し、スクロールに合わせて背後から広がり、上へスクロールすると元に重なるようにしてください。
広がりはスクロール位置に直接連動させ、余分なコピーはスクリーンリーダーから隠して単語が一度だけ読まれるようにしてください。

既存のテキストがアニメーションで消え、新しいテキストに置き換わります。

[適用する場所]にテキストリプレイスメント(Text Replacement)エフェクトを追加してください。テキストスワップ(text swap)とも呼ばれます。
テキストが変わるとき、古い文字は上へすべって消え、新しい文字は下から入ってくるように、1文字ずつ素早くなめらかな波のように切り替えてください。
切り替え中にテキストボックスのサイズが急に変わらないようにし、スクリーンリーダーには新しいテキストだけを読み上げさせてください。

段落の単語が、スクロールに合わせて薄い状態から完全な不透明へと変わります。

[適用する場所]にテキストリビール(Text Reveal)エフェクトを追加してください。スクロールテキストリビール(scroll text reveal)、単語ごとのリビール(word-by-word reveal)とも呼ばれます。
段落は最初薄く表示し、スクロールに合わせて単語が一つずつはっきりした濃さまで明るくなるよう、スクロール位置に連動させてください。
上へ戻すと単語は再び薄くなるようにし、薄さに関係なく段落全体をスクリーンリーダーで読めるようにしてください。

カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。

[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。

テキストがランダムな文字に置き換わって切り替わり続け、徐々に最終的な単語に落ち着きます。

[適用する場所]にテキストスクランブル(Text Scramble)のホバーエフェクトを追加してください。テキストデコード(text decode)、暗号化テキスト(encrypted text)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。

テキストがマウスの位置を追って3Dパースペクティブで傾きます。

[適用する場所]にテキストチルト(Text Tilt)エフェクトを追加してください。パースペクティブテキストチルト(perspective text tilt)とも呼ばれます。
テキストがポインターの動きになめらかに追従して3Dでやさしくポインター側へ傾き、ポインターが離れるとゆっくり平らに戻るようにしてください。
傾きは控えめにしてテキストを読みやすく保ち、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は平らなままにしてください。

文字がタイプされるように一つずつ現れ、たいていその後に点滅するキャレットが続きます。

[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。

ホバーすると、リンクの下に片側または中央から下線が伸びます。

[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。

可変フォントの軸を使って、文字がなめらかに太く・細くなります(幅や傾きが変わることもあります)。

[適用する場所]にバリアブルフォントウェイトアニメーション(Variable Font Weight Animation)のホバーエフェクトを追加してください。フォントウェイトシフト(font weight shift)とも呼ばれます。
ポインターがテキストに乗っている間、文字が左から右へなめらかな波のように順番に太くなり、ポインターが離れると細く戻るようにしてください。
太さが飛ばずになめらかに変わるよう可変フォントを使い、見出しが広がっても周りのコンテンツを押しのけないようにし、キーボードフォーカス時にも同じ効果を表示してください。

大きな文字が窓のようになり、その内側で再生中の動画が見えます。

[適用する場所]にビデオテキスト(Video Text)エフェクトを追加してください。テキストビデオマスク(text video mask)とも呼ばれます。
大きく太い文字を再生中の動画をのぞく窓にして、動く映像が文字の形の内側にだけ見えるようにしてください。
動画はミュートでコントロールなしのループ再生にし、スクリーンリーダー向けに言葉を実際のテキストとして用意し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止画を表示してください。

文字が順番に上下に揺れ、単語の中を波が流れていくように見えます。

[適用する場所]にウェービーテキスト(Wavy Text)エフェクトを追加してください。テキストウェーブ(text wave)とも呼ばれます。
文字を順番に上下させ、やさしくなめらかな波が単語の中を流れ続けるようにしてください。
途切れなくループさせ、スクリーンリーダーには一つの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。

文中の一語が、スライド・フリップ・フェードでリストの次の単語に入れ替わります。

[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。