SHIROI PONZU

2022.9.19

【css】アニメーションで無限に流れるテキストの実装

  • CSS
  • アニメーション
【css】アニメーションで無限に流れるテキストの実装

cssのアニメーションを使って、無限に横に流れるテキストを実装します。

 

See the Pen
Untitled
by nanami (@nanami_po)
on CodePen.

 

横幅の長さに合わせて、liタグのテキストの要素を増やし、テキストが途切れないように調整してください。その際、要素が増えるとテキストが流れるスピードも速くなっていくので、
animation: flowing 20s linear infinite;
の20sの部分の数字を変更して任意の速さにしてください。

テキストが流れるスタート位置は、アニメーションのX座標から変更できます。

 

実装例

ページを開いて一番左からスタート

@keyframes flowing {
0% { transform:translateX(0); }
}

 

中央からスタート

@keyframes flowing {
0% { transform:translateX(50%); }
}

liのテキスト部分を投稿記事にして流せばニュースティッカーのようにもなります。

以上で実装は完了です。良かったら参考にしてください◎

 

Share Please

Read this too