12

Animations without JS...or CSS...or IMAGES??!? 😲 Pure HTML animation!

 2 years ago
source link: https://dev.to/inhuofficial/animations-without-js-or-css-or-images-pure-html-animation-45di
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.
Cover image for Animations without JS...or CSS...or IMAGES??!? 😲 Pure HTML animation!

Animations without JS...or CSS...or IMAGES??!? 😲 Pure HTML animation!

Apr 16

・2 min read

I recently created a countdown timer that used no JS, CSS or HTML.

But now I have gone even more insane!

I present to you an animation that doesn't use any images....

An animation that doesn't use any CSS...

An animation that doesn't use any JavaScript....

It is all done with pure HTML!

Click here to experience it in all of it's glory! (sorry I can't make it work on dev.to!)

Spoilers lie below so make sure you click the link and see it in action before scrolling down!

.
.
.
.
.
.
.
Spoilers in
.
.
.
.
.
.
3
.
.
.
.
.
.
2
.
.
.
.
.
.
1
.
.
.
.
.
.

Spoilers!

Yes I did just Rick Roll you with ASCII text!

I title the piece "Rick ASCIIly" (groan) 🤣🤣🤣🤣

So what is going on?

Super simple - there are 44 pages each with a different "frame" of our ASCII video.

Each frame is then set to automatically load the next page using <meta http-equiv="refresh" content="0; URL = {next image URL}">

The last page then points to the first page to create an infinite loop!

By setting the delay to 0 and with a fast enough connection (or when all the images are cached locally) it actually performs reasonably well....it is just a shame I can't play audio as well!

Does it have any practical uses? no.

Did it get me locked out of my server as it triggered Mod Sec with too many requests? Absolutely!

Is it a bit of fun on a Friday? Yes

So happy weekend people, you got rick rolled with ASCII text so I win the internet for today 🤣🤣🤣!

Leave a comment if you hate me for this! 😜


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK