【CSS】テキストを横方向に自動でスクロールさせる方法

はじめに

最近、Webデザインのまとめサイトなどで見かける、横方向に流れるテキストの実装方法です。marqueeタグは非推奨になり使用できませんが、CSSアニメーションを使い簡単に実装できます！

やりたいこと

marqueeタグのようにテキストを右から左に流れるように配置します

実装方法

1. HTML

<div class="section__marquee">
  <p class="marquee__text">CO-WRITE</p>
  <p class="marquee__text">CO-WRITE</p>
  <p class="marquee__text">CO-WRITE</p>
</div>

.section__marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}

.marquee__text {
  display: inline-block;
  padding-right: 0.5em;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

 

ポイント

• white-space: nowrap;
  テキストを折り返さず、一行で表示します
• animation: marquee 10s linear infinite;
  10秒で1回スクロールし、無限ループで滑らかにスクロールさせます
• @keyframes marquee
  キーフレームを使い、テキストを右から左へスムーズに移動します

 

参考サイト

こちらのサイトを参考にさせていただきました。

 

• WEB
• Tips
• 技術情報