Ah, yes... I just knew there had to be a use for those dang animated-alpha PNGs... Obviously this is how all web pages will be viewed in the future.
I'm sure you all immediately figured out how this craziness worked, but juuust in case, I'll delve:
First an animated alpha PNG image is loaded on to the page. It's just a white square with a pulsating alpha circle in the middle of it. If the circle isn't pulsating, then your browser doesn't support animated PNGs (see my last post).
Next! four DIVS are inserted - above, left, right, and below the PNG square. As you move your mouse around, the square follows, and the borders of the DIVs are adjusted accordingly.
Fin. Just... awesome!
<- This is how it works...
...and the script if you're feelin' lucky...
7 Comments
That is awesome, you are a man amongst Gods. I love you and wish to tweak your nipples.
You are a very very bad man.
ahh, and to concerned anonymous emailer – nope, it doesn’t use the canvas tag – I shouldn’t have used CANVAS_WIDTH in the script… I’ll change it tomorrow to avoid confusion!
A light in the darkness! ….or is it a dark in the lightness?
Anyway, it is brilliant.
To concerned anonymous emailer reply #2… yes, true, you can’t click on links below (because your mouse is always over the png) – I made a version that ends up leaving a “hole” under the cursor so you could interact with the html below… but the code is too hideous, even for me.
2010 – I knew the man who first came up with the idea for those websites. Tragic the way he was set upon …
Hey {Mr Speaker} it’s me Rob from {that company}, hey guess what, I was searching for “beer oclock” and your blog came up as the first link on page 2! hah, I guess it’s saying somethign about how google sees you and what it thinks your blog is about ;)
hehe.