How to Create a Responsive Marquee Effect with CSS3 Animation?

How can I create a responsive marquee effect with CSS3 animation?

CSS3 animations provide a powerful way to add motion to your website elements. One of the most common applications is the marquee effect, where text scrolls across the screen. However, creating a marquee effect that adapts to text of any length can be challenging.

Previous Attempts

Traditional approaches to creating marquee effects often rely on fixed values like margin-left:-4200px;. While this works for specific text sizes, it becomes problematic when the text length varies.

Adapting the Approach

Utilizing a slightly modified markup, with a span nested within the paragraph, allows for a more responsive solution. Here's the updated approach:

.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); }
}

In this approach, the span's width is set to "max-content," ensuring it adjusts to the length of the text. The padding-left is used to move the text outside the visible area, and the animation translates the text back into view, creating the marquee effect.

Respecting User Preferences

For accessibility concerns, the code respects user preferences regarding motion. if the user prefers reduced motion, the animation is disabled.

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

By incorporating these techniques, you can create a responsive marquee effect that adapts to any amount of text, enhancing your design flexibility and accessibility.

The above is the detailed content of How to Create a Responsive Marquee Effect with CSS3 Animation?. For more information, please follow other related articles on the PHP Chinese website!