← All motions
Fullscreen ↗

Word Rotator

ワードロータリー

No.
303
Category
Loop
Tech
CSS
【対象要素】
- 見出しの中の入れ替わる1単語(「作る・磨く・試す」のような言い換え)に適用する

【演出内容】
- 単語が下から上へスライドして次の単語に入れ替わり続ける
- 切り替えは素早く、表示中はしっかり止まる(静止2秒前後)

【品質要件】
- 表示領域を1行分の高さでマスクし、前後の単語が見えないようにする
- 最後の単語の次は最初の単語へ、同じ動きで戻る
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

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