How Can I Create a Responsive Marquee Effect That Handles Variable Text Lengths?

<p>

Marquee Effect: Solving the Length Variability Conundrum

<p>In this scenario, we strive to create a marquee effect with dynamic text lengths. Traditionally, this has been achieved using specific values for CSS properties such as "margin-left." However, this approach falls short when working with texts of varying lengths.

<p>Fortunately, there's a solution that liberates our marquee from these limitations. By making a slight adjustment to our HTML and adding a span element within our paragraph, we unlock a more adaptable solution:

<p>

<p>Next, we define CSS rules for both the "marquee" and "span" classes. The "marquee" class defines the width and styling of the paragraph, while the "span" class handles the text animation:

.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>This adjustment for "width" and "padding-left" allows the marquee to accommodate texts of varying lengths, ensuring it scrolls smoothly without truncating any content.

<p>However, there's one last nuance we need to address: accessibility and user preferences. For users who prefer reduced motion, we apply media query rules to adjust the animation behavior. This ensures that the marquee respects the user's preferences:

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

<p>By implementing these changes, we achieve a marquee effect that gracefully adapts to text lengths while also respecting user preferences.

The above is the detailed content of How Can I Create a Responsive Marquee Effect That Handles Variable Text Lengths?. For more information, please follow other related articles on the PHP Chinese website!