Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

JQuery powered lights off effect

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
document.getElementById('the_lights').style.display='block'

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.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (41 votes, average: 3.56 out of 5)
Loading...Loading...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 19 comments

  1. Yarden Refaeli

    on October 13, 2009 at 8:55 am

    Why do you use primitive “document.getElementById” when you can use the powerful jQuery selector?
    $(“#id”);

    Thank you!

  2. jake

    on October 18, 2009 at 9:51 pm

    And the path to jquery-1.3.2.min.js… is?

  3. Jack

    on October 22, 2009 at 3:31 pm

    @jake you can get jQuery here http://jquery.com/ !
    Great tutorial dude ! I love jQuery it makes javascript and ajax stuff really fun and easy.

  4. Alex

    on November 3, 2009 at 5:09 pm

    Great tutorial, Emanuele! This worked really well for me. Thanks.

  5. George

    on November 23, 2009 at 11:55 pm

    Great Mod… only question whem this is posted what is the link to activate it…

    Which link will show on the actual webpage?

  6. Bishwajit Maitra

    on December 7, 2009 at 3:22 pm

    It’s good for “MOZILLA” but it does not work in “IE, Opera, Google Chrome”

  7. Tony

    on December 8, 2009 at 10:43 am

    it there any way to auto turn off the light want the page loaded? thank you.

  8. Jose Daniel

    on June 23, 2010 at 5:08 am

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

    document.getElementById(“the_lights”).style.display=”block”;
    $(“#the_lights”).fadeTo(“slow”,0, function() {
    document.getElementById(“the_lights”).style.display=”none”;
    });

  9. Courtney

    on July 13, 2010 at 1:54 am

    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.

    #the_lights{
    background-color:#000;
    height:1px;
    width:1px;
    position:absolute;
    top:0;
    left:0;
    display:none;
    }
    #standout{
    padding:5px;
    background-color:white;
    position:relative;
    z-index:1000;
    }

    function getHeight()
    {
    if($.browser.msie)
    {
    var $temp = $(“”)
    .css(“position”,”absolute”)
    .css(“left”,”-10000px”)
    .append($(“body”).html());

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

    $(document).ready(function(){
    $(“#the_lights”).fadeTo(1,0);
    $(“#turnoff”).click(function () {
    $(“#the_lights”).css(“width”,”100%”);
    $(“#the_lights”).css(“height”,getHeight()+”px”);
    $(“#the_lights”).css({‘display’ : ‘block’});
    $(“#the_lights”).fadeTo(“slow”,1);
    });
    $(“#soft”).click(function () {
    $(“#the_lights”).css(“width”,”100%”);
    $(“#the_lights”).css(“height”,getHeight()+”px”);
    $(“#the_lights”).css(“display”,”block”);
    $(“#the_lights”).fadeTo(“slow”,0.8);
    });
    $(“#turnon”).click(function () {
    $(“#the_lights”).css(“width”,”1px”);
    $(“#the_lights”).css(“height”,”1px”);
    $(“#the_lights”).css(“display”,”block”);
    $(“#the_lights”).fadeTo(“slow”,0);
    });
    });

    thanks for your work BTW

  10. Richard

    on November 28, 2010 at 2:45 am

    …You’re an engineering genius! Thank you so much for the help!!!

  11. Caio Beltrão

    on March 17, 2011 at 2:55 am

    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.
    Thanks.

  12. Dapo

    on September 30, 2011 at 1:11 am

    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!

  13. Javier

    on November 24, 2011 at 12:57 am

    This is great, I hope to get to work on my website.

  14. iTechColumn

    on January 9, 2012 at 8:34 pm

    Great work.. Is it possible to make it work on mouse hover?? That would be interesting..

  15. Jeet

    on January 14, 2012 at 11:00 am

    Can you Give mee The link of ur jquery file.. So that i can use in my website..I am unable to find proper link.

  16. ??????? ???????

    on March 4, 2012 at 10:02 pm

    Nice Script

  17. Bruce_Jawn

    on April 30, 2012 at 3:41 am

    My enhanced fork (link/text now selectable, cover full page not only screen/view port, Embeded swf quick fix):
    http://bruce-lab.blogspot.com/2012/04/jquery-turn-onoff-lights-effect.html

  18. Varun

    on September 25, 2012 at 6:44 am

    hi,
    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!!

    Varun.V.Davda

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

    on March 6, 2013 at 9:43 am

    […] http://www.emanueleferonato.com/2009/10/12/jquery-powered-lights-off-effect/ […]

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×