HN Explorer

11 comments

[ 3.7 ms ] story [ 37.0 ms ] thread
telemachos
It looks cool as hell, but I can see it quickly becoming this generation's blink.
necubi
In case anybody's wondering, it works by moving a radial gradient with 0 alpha at the center using javascript. It's slow on Chrome, probably due to the effort required to redraw the gradient at every time step.

A better approach, at least for webkit browsers, would be to use the new mask property.

sid0
Yeah, it's pretty slow with Chrome. There's no "input lag" with hardware-accelerated Firefox though.
bd
Here is my quick attempt to reproduce the effect just with CSS2 and transparent PNGs:

http://alteredqualia.com/visualization/css2-spotlight.html

It's still a bit buggy around the edges, but it's much faster than CSS3 one.

Plus it works also in Opera (and probably could be forced to run in Explorer with a bit more care).

-----

Edit: fixed bugs around edges and made it work in Explorer 8 (which is surprisingly the fastest).

About performance: the biggest difference is in Firefox (standard release 3.6.3, no development HW accelerated builds).

apphacker
That is pretty cool and creative. One thing though is that you have more markup that does nothing and is only for the purpose of display.

You couldn't add your spotlight effect to css zen garden, but you could possibly add the CSS3 spotlight.

ivanstojic
I think neither would qualify because both require a JavaScript component to actually work as a spotlight.

Neither of the submitted solutions are particularly novel, but I'd applaud the CSS2 version more for (if nothing else) the supported browser coverage.

IMHO, there are FAR more interesting things in HTML5/CSS3 than gradients.

sid0
Nice, though I don't see a speed difference between the examples.
cubtastic71
CUTE- reminds me of the early Flash 3 stuff - A spotlight!!