CSSを使用したテキストのスクロールループ化の方法

方法1: CSSのanimationプロパティを使用する方法

CSSのanimationプロパティを使用すると、テキストをスクロールさせるアニメーションを作成できます。以下はその例です。

<style>
.scroll-loop {
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
<div class="scroll-loop">
  ループするテキスト
</div>

この例では、scroll-loopというクラスを作成し、animationプロパティを使用してスクロールアニメーションを定義しています。@keyframesルールを使用して、テキストを上にスクロールするアニメーションの詳細を指定しています。transform: translateY(-100%);の部分で、テキストを上にスクロールさせています。infiniteキーワードを使用することで、アニメーションを無限に繰り返すように設定しています。

方法2: CSSのmarquee要素を使用する方法

CSSには、marquee要素を使用してテキストをスクロールさせる方法もあります。以下はその例です。

<style>
.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
<div class="marquee">
  ループするテキスト
</div>

この例では、marqueeというクラスを作成し、animationプロパティを使用してmarquee効果を定義しています。@keyframesルールを使用して、テキストを左にスクロールするアニメーションの詳細を指定しています。transform: translateX(-100%);の部分で、テキストを左にスクロールさせています。

これらの方法を使用すると、テキストをスクロールループさせることができます。必要に応じて、テキストのスタイルやアニメーションの詳細を調整して、自分のニーズに合わせることができます。

以上が、CSSを使用してテキストのスクロールループを作成する方法です。