Have fun and help me to get to 1,000,000 downloads!

JQuery powered lights off effect

Emanuele Feronato Css, Html, Javascript

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script:

The div is the one called standout at line 48 and it has nothing special but a background color (it can’t be transparent) and a z-index along with a relative position (lines 40-42).

Obviously the z-index should be higher than the rest of the elements.

The other interesting div is the_lights (line 50), a black div covering all the page, initially invisible (lines 30-36). Playing with its transparency will simulate the lights effect

Now it’s all a matter of JQuery:

Line 7: Listening for the document to be ready

Line 8: Once it’s ready, the first thing is setting the_lights alpha to zero. I don’t set it from CSS but use fadeTo because I need to initialize the fading process. The entire lights out effect is just playing with the_lights and some tweening.

Line 9: Here I am listening for the turnoff div to be clicked

Line 10: Showing the_lights div… this is the same thing as

Line 11: Fading the black div to full opacity.

This will give the “lights out effect”

Try the example at this page will show you the effect… click on “lights on”, “lights off” or “soft lights” and see what happens.

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 20

  1. Jose Daniel

    i would change a little bit the code to be able to select text again:

    $(“#the_lights”).fadeTo(“slow”,0, function() {

  2. Courtney

    Hey great ideas you’ve put into this. I modified your work a bit. The blank div was covering all my content because it had a higher z index so none of the links on the page worked. I tweaked it to fix that little bug and also to use jquery’s functions instead of raw javascript functions here’s the moded css and js, the div’s are all the same.


    function getHeight()
    var $temp = $(“”)

    var h = $temp.height();
    return h;
    return $(“body”).height();

    $(“#turnoff”).click(function () {
    $(“#the_lights”).css({‘display’ : ‘block’});
    $(“#soft”).click(function () {
    $(“#turnon”).click(function () {

    thanks for your work BTW

  3. Caio Beltrão

    Hi there,
    great work! It’s the best ‘Turn Off The Lights’ that I found over the web.
    There’s only a ‘bug’ that I found and can’t get fix, when you scroll down the page, the rest is not faded to black. Any ideas about how to fix it?
    I tried in 3 different browser and they have the same issue.

  4. Dapo

    Great script! But after I’m turning off the lights, and then switch them back on, I can’t click any links on my web page. Any solution will be greatly appreciated.

    Thanks alot!

  5. Varun

    m looking for lightning effect on links for website!!
    Like,initially it should be normal n when the mouse is over the link then there should be a small spotlight above the button which throws the light on the link
    n the effect should look real..that is it should turn a bit brighter when the spotlights throws light on button!!!
    can you pls pls help me with this???
    thanks alot in advance!!


  6. Pingback: Turn off all the lights your website to support Earth Hour day using Jquery | 8tut.com

  7. Jesse Alex

    Hello Emanuele,

    Thank you for this tutorial. Although I had a query. I wanted the ‘soft lights’ to happen when someone hovered over the navbar.

    How can I attain this?

    Could you please help me with this?


Leave a Reply

Your email address will not be published. Required fields are marked *