【CSS】自動で流れるニュースを実装する

2023年8月23日2023年9月1日

ニュースを自動で延々と流れるようにしたいなぁ･･･

というわけで今回は自動で流れるニュースを実装します！
実案件ではそこまで出くわすことはないと思いますが知っておくと
提案の幅が広がること間違いなし！！というわけで早速見て行きましょう！

流れるニュースを実装する

まずはコードから見て行きましょう！

ではポイントとなる部分を説明して行きましょう！！

まず一つ目のポイントはoverflow: hidden;です。
これは、スクロールさせる要素の親要素に忘れず付けましょう！
予期せぬスクロールバーや表示崩れを起こす可能性があります。

white-spaceとはCSSのプロパティの一つです。
要素内の半角スペース･タブ･改行をどのように表示させるかを指定します。

white-spaceは指定しなければwhite-space: normal;が指定されています。

white-space: nowrap;とwhite-space: normal;の違いは「改行」するかしないか、です。
「normal」だと親要素の端に来ると勝手に改行されますが
「nowrap」だと<br>を使わない限り改行されません。

今回は端まで行ってそのまま画面外にしたいので「nowrap」にしてます。

ここではtransform: translateX(-100%);と初期設定をしております。
ここは流れるニュースの見せ方にもよりますが、ブラウザを開いた瞬間に
表示させたくなかったので初期は画面外になるように100％としております。

あとはアニメーションで右画面外100％⇒左画面外-100％となるように設定すればOKです！
もし文字数が増えてwidth100%内に収まらなければtranslateXの値を変更すれば
綺麗に収まります。(translateX(-150%)など)

というわけでコードをかいつまんで説明しましたが如何だったでしょうか？
実際に色々触ってみると理解が深まると思いますので
是非、codepenのコードをご自身の環境にコピーして頂いて色々試してみてください♪

よかったらフォローしてね！！