Sunday, April 29, 2012

Jquery Turn on/off Lights Effect

I found the script to create simple turn on/off lights effect for web pages here: http://www.emanueleferonato.com/2009/10/12/jquery-powered-lights-off-effect/
It use jquery to achieve the effect. The idea is to create a css as the light which covers the page.
However, the original script has several problems:
1. The light can only cover the screen, not the full page.
2. Links and texts are not selectable.
3. Embeded swf will be covered.

The solution to the first problem: http://stackoverflow.com/questions/2852276/make-div-overlay-entire-page-not-just-viewport
For the second, there is a fix in the comments below there. And the third one, for swf, I defined a new css which will not be covered (higher z-index) and use jquery to change its background to black when turning off the lights.

The final enhanced version:
Demo
Source Code
(Scroll down to the bottom of page, click Lights off/Soft lights/Lights on to see the effect, right click to view source.)

Links:
http://jquery.com/

No comments:

Post a Comment

Sponsors