I threw this together overnight (and have tweaked it some since then). Just applying a few little CSS party tricks that I've learned or developed along the way... 😉
My tricks aren't revealed in the narration, but since this is a How To series, you should be able to ferret them out by now — and if not, then take it as your homework challenge! ❤️
Use your 1337 haX0r Wiz zen skillz.
Click for keynote
Best viewed on a COMPUTER browser with a MOUSE, not a 'phone where some effects will be missed or simply not optimized (though there are a couple of surprises that appear on iPhone [not Android] rather than desktop browsers).
⚠️
CAUTION, beware of audio from invisible video; see notes.
⚠️
Cf. notes in work skin for issues w.r.t. different approaches used in this work.
Though I did leave some things still-clickable — just a few... OK, one thing, but still. And an escape, should you get frustrated. Yeah... about that? I lied: the escape is the only thing that I left clickable. 😅
Notes:
● CAUTION on Chromeif sound enabled via button in address bar or through settings (Chrome://settings ► Privacy and security ► Site settings ► Permissions ► Sound = Allow [not “Automatic”], or basically chrome://settings/content/siteDetails?site=https%3A%2F%2Farchiveofourown.org%2F).
● CAUTION on Firefox and TORif sound enabled through settings.
● CAUTION on Firefox with permissions to allow audio via button in address bar.
● CAUTION on [MS] Edgewith autoplay enabled.
● Probably safe under iOS Safari and Android Chrome restrictions; can confirm no autoplay on my iPhone or Android;
● Opera is silent for me, even with Site Sounds enabled.
A POP-UP has appeared!
It seems to be blocking something — maybe something IMPORTANT !
Oh me, oh my, what ever shall you do?!?
