別名 Glitter, Twinkle particles, Sparkles Text, Text Sparkle Particle Highlight
小さく明るいきらめきが、テキストやセクションの周りで現れては消えます。
[適用する場所]にスパークル(Sparkles)のエフェクトを追加してください。グリッター(glitter)、トゥインクルパーティクル(twinkle particles)とも呼ばれます。
小さな星形のきらめきが、テキストの周りのばらばらな位置にランダムなタイミングでぱっと現れ、瞬いて消えるようにしてください。軽やかに素早く。
きらめきは装飾扱いにしてスクリーンリーダーから隠し、テキスト自体は決して覆わず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。
別名 Floating particles, Particle field
たくさんの小さな点が背景を漂い、つながったりポインターに反応したりします。
[適用する場所]にパーティクル(Particles)の背景を追加してください。フローティングパーティクル(floating particles)、パーティクルフィールド(particle field)とも呼ばれます。
大きさの異なる小さな点が、それぞれのペースでゆるやかにさまよう軌道を描いてゆっくり漂うようにしてください。穏やかで軽やかに。
遅いデバイスでも軽く動くよう点の数は控えめにし、画面外では一時停止し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。
別名 Meteor shower, Shooting Stars
光る尾を引く斜めの筋が、カードやセクションを横切って流れ落ちます。
[適用する場所]にメテオ(Meteors)のエフェクトを追加してください。流星群(meteor shower)、流れ星(shooting stars)とも呼ばれます。
消えていく尾を引く小さな筋をいくつか、ランダムなタイミングでエリアを斜めに横切らせてください。一つひとつは素早く流れてすぐ消えます。
アクセントにとどまるよう数は少なめにし、エリアの端で切り取り、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。
別名 Film grain, Noise background
細かな粒状のテクスチャがページに重なり、ときにフィルムグレインのようにちらつきます。
使いどころ
グラデーションに手触りのある奥行きを加える
[適用する場所]にノイズ/グレインテクスチャ(Noise / Grain Texture)のオーバーレイを追加してください。フィルムグレイン(film grain)、ノイズ背景(noise background)とも呼ばれます。
細かく薄い粒状のテクスチャを表面に重ね、フィルムグレインのように小刻みにちらつかせてください。控えめに、コンテンツを濁らせるほど強くしないでください。
クリックはオーバーレイを通り抜けるようにし、テクスチャは毎フレームではなく一度だけ生成し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。