🚀 <marquee> rocket 🚀
what is this?
it’s a rocket that you control only using the <marquee> tag.
whoosh!
You can:
↕️ Change Course! Send your rocket in all four directions
🐌 Slow Down! Or speed up, as the situation warrants
⏯ Full Stop! Hold in place until the danger has passed
seriously?
yup. everything (including this explainer) is done in <marquee>.
it doesn’t work :(
unsurprising, alas. The <marquee> tag has been deprecated for
a long time and browser support is patchy.
I wrote it in Safari and it works best there. It kinda works in Chrome
(but direction/speed changes only apply on the next scroll). Something
weird is happening with text labels in Firefox that I don’t care to fix.
why?
so Laurie Voss is running a Twitter poll/
Angle Bracket bracket
,
and the <marquee> tag is doing pretty well (as it should).
and then he posted this:
An unexpected side effect of this tournament has been watching
people come up with ways to write complete web apps using
fewer and fewer tags.
then I asked myself: what could I do with <marquee>?
turns out: quite a bit!
how does it work?
it’s been a while, so I started by reading the
MDN docs for <marquee>
I learn that it’s quite configurable. you can set the scroll direction,
the speed, whether it bounces off or moves through walls, etc.
this page makes heavy use of scrollamount="0", which turns the
scrolling <marquee> into a static element.
so I got playing, then realised it responds to standard HTML
DOM handlers like onclick, and now I can run JavaScript.
from that I could build buttons and links, and we’re off to the races.
(or space, in this case.)
you can see how it works by using “View Source” in your browser
or reading the source code
on Glitch
who are you?
in most places, I’m
@alexwlchan
if you enjoyed this this, you may like to look at
my other projects
including a tool to calculate storage space in 3.5″ disks.