横に途切れず流れる文字列をCSSで実現する方法

今回紹介するのは、CSSのみを使って、文字列が横に途切れることなく流れていく処理です。この処理は、サイトに動きのあるデザインを加えたいときに非常に便利で、特にニュースティッカーや広告、メッセージの表示などでよく使われます。

実装の基本構成

まず、次のCSSコードを使って文字列を横に流れるアニメーションを実現します。文字列がスムーズにループするように設定しています。

1. HTMLコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}
.wrapper {
  display: flex;
  animation: loop-text 10s linear infinite;
}
.double-content {
  display: inline-block;
  font-size: 6rem;
  white-space: nowrap;
}
@keyframes loop-text {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
<div class="container">
  <div class="wrapper">
    <span class="double-content">こちらの文字列が横に流れていきます。こちらの文字列が横に流れていきます。</span>
    <span class="double-content">こちらの文字列が横に流れていきます。こちらの文字列が横に流れていきます。</span>
  </div>
</div>

解説

1. .container:
   • overflow: hidden;: 流れる文字列がコンテナの外に出てしまわないように、表示範囲を制限しています。
2. .wrapper:
   • display: flex;: 子要素（spanタグ）を横並びに表示するためにFlexboxを使用しています。
   • animation: loop-text 30s linear infinite;: 文字列が30秒間で左に流れるアニメーションを設定し、無限ループで繰り返されるようにしています。linearは一定の速度で流れることを示します。
3. .double-content:
   • white-space: nowrap;: テキストが改行されないように1行で表示させます。
   • 2つの同じ文字列を用意して、1つの文字列が画面の外に流れても次の文字列がすぐに表示されることで、途切れなくスムーズなループを実現しています。
4. @keyframes loop-text:
   • 0%: 文字列の初期位置（画面の左側に表示）。
   • 100%: 文字列がtranslateX(-50%)、つまり画面の半分まで移動することで、連続して文字が流れるようになります。これにより、途切れることなく文字列がループします。