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:
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:
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:
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.)


No comments:

Post a Comment