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/
Sunday, April 29, 2012
Jquery Turn on/off Lights Effect
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment