This is a web component recreating the obsolete <marquee> element.
The point of a web component is that you can use it just like you would any other HTML tag.
For instance is you've included <mar-quee> in your page already then the following HTML:
<mar-quee>marquee one</mar-quee>
<mar-quee>marquee one</mar-quee>
<mar-quee>marquee twoooooooooo</mar-quee>will look like this:
Just include <script src="mar-quee.js"></script> at the bottom of your <body>> & you're good to go!
Customization is available via CSS custom properties:
| property | default value |
|---|---|
--marquee-height |
25px |
--marquee-width |
100px |
--marquee-animation-timing-function: |
linear |
--marquee-animation-duration |
3s |
--marquee-animation-iteration-count |
infinite |
Heavily inspired by <bg-sound>