Home > Designing, Others > CSS-Only Marquee Effect

CSS-Only Marquee Effect

You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.

You’ll probably want to aria-hidden all but one of them if you need to duplicate the text. Or, you could use a very clever CSS trick to “duplicate” the text using text-shadow.

Nice to see prefers-reduced-motion in there stopping the effect when it should be.

Direct Link to ArticlePermalink

The post CSS-Only Marquee Effect appeared first on CSS-Tricks.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.