CSSを使用した無限スクロールテキストの実装方法

2024-02-09 17:53 CSS無限スクロールテキスト

方法1: CSSのanimationプロパティを利用する方法 この方法では、CSSのanimationプロパティを使用してテキストをアニメーションさせます。まず、次のようなHTMLとCSSを用意します。

HTML:

<div class="scrolling-text-container">
  <p class="scrolling-text">スクロールするテキスト</p>
</div>

CSS:

.scrolling-text-container {
  width: 100%;
  overflow: hidden;
}
.scrolling-text {
  animation: scroll-left 10s linear infinite;
  white-space: nowrap;
}
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

上記のコードでは、scrolling-text-containerクラスの要素にテキストを含むscrolling-textクラスの要素を配置しています。scrolling-text-containerクラスのwidthプロパティを100%に設定し、overflowプロパティをhiddenに設定することで、テキストがはみ出すのを防ぎます。scrolling-textクラスのanimationプロパティでscroll-leftというアニメーションを指定し、10秒間かけて線形にスクロールさせるよう設定しています。@keyframesルールを使用して、アニメーションの始点と終点でテキストを水平方向に移動させています。

方法2: CSSのMarquee要素を利用する方法 もう一つの方法として、CSSの<marquee>要素を使用する方法があります。以下に例を示します。

HTML:

<marquee behavior="scroll" direction="left">スクロールするテキスト</marquee>

上記のコードでは、<marquee>要素でテキストを囲み、behavior属性をscroll、direction属性をleftに設定することで、テキストを左方向にスクロールさせます。