CSS3 アニメーションを使用してレスポンシブ マーキー効果を作成する方法

CSS3 アニメーションを使用してレスポンシブ マーキー効果を作成するにはどうすればよいですか?

CSS3 アニメーションは、Web サイト要素にモーションを追加する強力な方法を提供します。最も一般的なアプリケーションの 1 つは、テキストが画面上をスクロールするマーキー効果です。ただし、任意の長さのテキストに適応するマーキー効果を作成するのは難しい場合があります。

以前の試み

マーキー効果を作成する従来のアプローチは、margin-left:-4200px; のような固定値に依存することがよくあります。 。これは特定のテキスト サイズでは機能しますが、テキストの長さが変化すると問題が発生します。

アプローチの適応

段落内にスパンをネストして、わずかに変更したマークアップを使用すると、より多くのことが可能になります。応答性の高いソリューション。更新されたアプローチは次のとおりです。

.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;
}
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}

このアプローチでは、スパンの幅が「max-content」に設定され、テキストの長さに合わせて調整されます。左パディングはテキストを表示領域外に移動するために使用され、アニメーションはテキストをビュー内に戻し、マーキー効果を作成します。

ユーザー設定の尊重

アクセシビリティの問題については、コードはモーションに関するユーザーの設定を尊重します。ユーザーがモーションを減らしたい場合、アニメーションは無効になります。

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

これらのテクニックを組み込むことで、任意の量のテキストに適応する応答性の高いマーキー効果を作成でき、デザインの柔軟性とアクセシビリティが向上します。

以上がCSS3 アニメーションを使用してレスポンシブ マーキー効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。