Rolling Text
ローリングテキスト
We
DesignMotionCreateDesign
どんな動き？
1行の枠内に複数の単語を縦に積み重ねて配置し、一定間隔でステップ状に上へ送り出すことで単語が次々と入れ替わって見えるループアニメーション。フリップ式の表示板のような小気味よい切り替わりが特徴で、キャッチコピーの一部を「Design / Motion / Create」のように複数の言葉で見せたいヒーローセクションなどに使われる。
よく使う場所
ヒーロー見出しキャッチコピーサービス紹介
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Stack several words vertically inside a single-line window and step through them one at a time in an infinite loop.Trigger:
Load (starts automatically and loops continuously).
Initial state:
translateY: 0% (first word visible)
Animation:
The stacked word list steps upward by one line at fixed intervals, revealing the next word each time; a duplicated final word aligns with the first for a seamless loop.
Final state:
translateY: -300% (visually identical to 0%, loops seamlessly)
Timing:
duration: 4.5–5s per full cycle
easing: steps()
iteration: infinite実装方法の候補
この動きは以下の技術で実装できます。
CSSGSAPSwiper
別名・関連ワード
Text RotatorWord RotatorRolling Words