legit-marquees
An open-source web component for generating stylable, screen-reader-friendly text path animations
You should check out the GitHub repository and watch the video tutorial!
<svg class="legit-marquee" viewBox="0 20 634 149"
content="Hello there!"
contentrepeat="1"
speed="4"
textsize="50"
pathd="m-20.66501,119.8335c146,-5 158,-32 231,-41c73,-9 189,44 294,45c105,1 142,-50 207.66501,-58.8335"
>
</svg>
<script src="https://cdn.jsdelivr.net/gh/olivernorred/legit-marquees/legit-marquees.js">
See the Pen by Oliver Norred (@olivernorred) on CodePen.
Three legit-marquees
stacked lets you style each one differently. They each have the same path and content with different amounts of leading ` ;`
s You may be able to do the same thing with some JavaScript trickery where you split up the words in the text
objects, but this is the easiest way IMHO.
I would love to see what you can make with it!
For the code-averse: legit marquee maker!
Sure, you can get more functionality by making it yourself, but this user interface gives those new to coding a foot in the proverbial door. I think the best way to use it is to generate an unrefined version of the code, and edit the viewbox, textsize, speed, and content later on.