Mask On, Mask Off
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…
This entry was posted on Monday, June 16th, 2008 at 2:13 pm and is filed under Nerd. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
That is awesome, you are a man amongst Gods. I love you and wish to tweak your nipples.
-blertYou are a very very bad man.
-Lachlan Hardyahh, 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!
-Mr. SpeakerA light in the darkness! ….or is it a dark in the lightness?
-Brother Anon.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.
-Mr. Speaker2010 - I knew the man who first came up with the idea for those websites. Tragic the way he was set upon …
-BizHey {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.
-Robert H