Using some good old obsolete HTML to create a JavaScript-free carousel & animations
I’m not sure how you first got in to web development, but in my case it was in my GNVQ ICT class whilst I was at school.
Back then we spent our time trying to create basic websites — using only <table> elements for structure and including as much flaming text as possible.
One of my favourite elements was the <marquee> element. At this point, your reaction will be either “oh yeah, that’s a blast from the past” or “what?”.
Either way, below is a reminder of what a basic <marquee> element looks like.
This was used for displaying random bits of content, even news.
But it got me wondering, could we use the <marquee> element to create a JavaScript-free image carousel? Turns out — it’s pretty simple.
There are many uses for this, maybe an Instagram feed?
But, you may ask, isn’t the <marquee> element now obsolete? Well, yes, it is. But, and this is a big but, according to the Mozilla docs, it’s still pretty well supported.
This isn’t the limit of what we can do with the <marquee> element, so I had a play around with using it for some animations…
For more information, the documentation here is pretty good.
More where this came from
This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
