CSS を使用してシームレスなスクロール テキスト表示効果を作成する方法。

CSS を使用してシームレスなスクロール テキスト表示効果を作成する方法とそれを実現する手順

Web デザインでは、シームレスなスクロール テキスト表示効果により、ユーザーのスムーズな操作が可能になります。そして魅力的なユーザーエクスペリエンス。このエフェクトは通常、カルーセルやスクロール ニュースなどのシーンで使用されます。この記事では、CSS を使用してシームレスなスクロール テキスト表示効果を実現する具体的な手順を紹介し、関連するコード例を示します。

ステップ 1: HTML 構造の作成

まず、スクロール テキストを含むコンテナ要素を作成する必要があります。 div、ul、またはその他の HTML 要素を指定できます。たとえば、div 要素を作成し、一意の ID を与えます。

<div id="scrolling-text">
  <ul>
    <li>文字1</li>
    <li>文字2</li>
    <li>文字3</li>
    <li>文字4</li>
    <li>文字5</li>
  </ul>
</div>

ステップ 2: スタイルを設定します

次に、幅を含むコンテナ要素のスタイルを設定する必要があります。高さ、オーバーフロー処理など。同時に、幅、高さ、行の高さなど、各スクロール項目のスタイルを設定する必要もあります。以下は基本的なスタイル設定です:

#scrolling-text {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#scrolling-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  animation: scrolling 10s linear infinite;
}

#scrolling-text ul li {
  width: 300px;
  height: 40px;
  line-height: 40px;
}

ステップ 3: シームレスなスクロール効果を実現する

次に、CSS アニメーションを使用して、テキストのシームレスなスクロール効果を実現する必要があります。 @keyframes ルールを使用して、スクロールというアニメーションを定義し、それをスクロール ul 要素に適用できます。

@keyframes scrolling {
  0% {
    top: 0;
  }
  100% {
    top: -200px;
  }
}

上記のコードでは、キーフレーム 0% と 100% を使用してそれぞれ開始と終了を定義します。アニメーションの状態。 top 属性は、スクロール項目の垂直位置を制御します。

ステップ 4: エクスペリエンスを最適化する

スクロール効果の読みやすさとユーザー エクスペリエンスを向上させるために、マウス イベントをコンテナ要素に追加して、マウスがホバーしたときと次のときにスクロールを一時停止します。マウスを離すと、再びスクロールが開始されます。 JavaScript を使用して実装されたサンプル コードは次のとおりです。

var scrollingText = document.getElementById('scrolling-text');

scrollingText.onmouseenter = function() {
  scrollingText.style.animationPlayState = 'paused';
}

scrollingText.onmouseleave = function() {
  scrollingText.style.animationPlayState = 'running';
}

上記の JavaScript コードを追加すると、スクロール コンテナ上にマウスを置くとアニメーションが一時停止され、マウスが離れるとアニメーションが再開されます。

これまでに、CSS を使用してシームレスなスクロール テキスト表示効果を実現するためのすべての手順が完了しました。必要に応じてスタイルとアニメーションのプロパティを調整して、Web デザイン スタイルに合わせたスクロール効果を得ることができます。

要約すると、この記事では、HTML 構造の作成、スタイルの設定、シームレスなスクロール効果の実現、エクスペリエンスの最適化など、CSS を使用してシームレスなスクロール テキスト表示効果を作成する手順を紹介します。この記事が、Web デザインでテキストのスクロール効果を実現するのに役立つことを願っています。

以上がCSS を使用してシームレスなスクロール テキスト表示効果を作成する方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。