← All motions
Fullscreen ↗

Separator Marquee

セパレータマーキー

No.
296
Category
Loop
Tech
CSS
【対象要素】
- 複数の短い単語・トピックを並べるテキスト帯に適用する

【演出内容】
- 単語と単語の間に小さな記号(● や ✳ など)の区切りを挟みながら流れ続ける
- 記号はアクセントカラー、単語は基調色にして色でもリズムを付ける

【品質要件】
- 記号は文字よりも小さくし、上下中央に揃える
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

Prompts and demo code are free to use in your own projects. See About.