Under Construction!
Hello! This page is still being worked on! Click to hide!
Hello! This page is still being worked on! Click to hide!
The <marquee> element has been dericated, and could be removed at any moment. Mostly for the accessibility concerns it does pose, but if your site is more art than info having a few isnt too big of an issue just don't put vital information inside the marquees.
Hey why dont you put down YOUR reason for wanting a modern marquee:
[Click here and type!]
Wow! very cool 
this isn't like a tutorial but i did write up a very little bit about whats happening. Making this page taught me a lot about CSS ngl, if you look in the documents head you can see nested & selectors. I like them a lot lol.
This is a basic 1 image marquee. It looks like she is gliding from right to left, and she is but she is also teleporting back to the right. Each miku is 50px wide, and if they were to stop moving there would be one masked outside of the container.
Also! less basic but cool, if you hover over any of her they all stop transforming. This is done with the pseudo-class ":hover" which activte when the mouse is over top the given element.
I based this off of a codepen i can no longer find, however they used JavaScript, this is just CSS. And while looking for it again i found others had done it pretty much the same way!
Same idea but with some text! it is much harder to figure out the width, so we use percentages instead. if you want a space between the sentences repeated end each <span> with " ".
Its a cat chasing a mouse. get it?
Each set of a cat and a mouse would count as one miku in the one <img> gif. make sure to have the sets overlap outside of the wanted marquee space so it looks seamless.
For horizontal marquees you must set the items widths, not their heights. a set height is only required in the case of a vertical marquee.
I havent made a vertical marquee yet (June 20tth 2026) but it should be a very similar principle.