CSS-Only Marquee Effect
Publikováno: 5.4.2020
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-hiddenall 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 Article — Permalink… Read article “CSS-Only Marquee Effect”
The post CSS-Only Marquee Effect appeared first on CSS-Tricks.
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-hiddenall 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 Article — Permalink
The post CSS-Only Marquee Effect appeared first on CSS-Tricks.