可変のテキスト長を処理するレスポンシブ マーキー エフェクトを作成するにはどうすればよいですか?

<p>

マーキー効果: 長さの変動に関する難題を解決する

<p>このシナリオでは、動的なテキスト長を使用してマーキー効果を作成することに努めます。従来、これは「margin-left」などの CSS プロパティの特定の値を使用して実現されてきました。ただし、このアプローチは、さまざまな長さのテキストを扱う場合には不十分です。

<p>幸いなことに、マーキーをこれらの制限から解放するソリューションがあります。 HTML にわずかな調整を加え、段落内にspan要素を追加することで、より適応性の高いソリューションを実現します。

<p>

<p>次に、「marquee」クラスと「span」クラスの両方のCSSルールを定義します。 。 "marquee" クラスは段落の幅とスタイルを定義し、"span" クラスはテキスト アニメーションを処理します。

.marquee {
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  width: max-content;
  padding-left: 100%;
  will-change: transform;
  animation: marquee 15s linear infinite;
}

<p>この "width" と "padding-left" の調整により、マーキーは次のようになります。さまざまな長さのテキストに対応し、コンテンツが切り詰められることなくスムーズにスクロールできるようにします。

<p>ただし、最後に対処する必要があるニュアンスが 1 つあります。アクセシビリティとユーザーです。好み。モーションを減らしたいユーザーのために、メディア クエリ ルールを適用してアニメーションの動作を調整します。これにより、マーキーがユーザーの好みを尊重することが保証されます。

@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation-iteration-count: 1;
    animation-duration: 0.01;
    width: auto;
    padding-left: 0;
  }
}

<p>これらの変更を実装することで、ユーザーの好みを尊重しながらテキストの長さに適切に適応するマーキー効果が実現します。

以上が可変のテキスト長を処理するレスポンシブ マーキー エフェクトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。