60

Using some good old obsolete HTML to create a JavaScript-free carousel & ani...

 5 years ago
source link: https://www.tuicool.com/articles/hit/iuInqeF
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
vEBR3yz.gif
This can be done JavaScript-free using the obsolete <marquee> HTML element.

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, you’re 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.

qa6Vf2B.png!web
The <marquee> element is pretty well supported despite being technically obsolete.

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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK