← All motions
Fullscreen ↗

Parallax Marquee Rows

速度差マルチロウ

No.
290
Category
Loop
Tech
CSS
【対象要素】
- セクション背景に敷く3段のテキスト帯に適用する

【演出内容】
- 3段のテキスト帯が同じ方向へ、それぞれ異なる速度で流れ続ける
- 速度差によって奥行き(視差)を感じさせる

【品質要件】
- 各段の速度比は1 : 1.5 : 2程度。どの段もゆっくりめに保つ
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

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