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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Emanuele Feronato's lights off effect</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
html{
width:100%;
height:100%;
margin:0px;
}
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:white;
position:relative;
z-index:1000;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque libero euismod nulla porttitor egestas. Nulla fermentum facilisis sagittis. Vestibulum commodo pretium diam, vitae scelerisque lectus bibendum nec. Curabitur a metus est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nunc dolor, pretium eget venenatis ut, condimentum at sem. Vivamus rhoncus ullamcorper turpis. Aliquam sit amet risus diam, vel mattis est. Quisque sodales eros id nulla rhoncus posuere. Nullam accumsan lorem quis dolor tempor congue. Vivamus ligula augue, commodo malesuada tempor non, tristique id enim. Sed dapibus sagittis porttitor. Suspendisse faucibus scelerisque eros, ac hendrerit orci scelerisque sit amet.</p>
<div id = "standout"><p>Everything inside this div will remain highlighted</p><div id = "turnoff">Lights off</div><div id = "soft">Soft lights</div><div id = "turnon">Lights on</div></div>
<p>Vestibulum interdum, odio ut congue imperdiet, justo ligula bibendum nisl, ac placerat orci eros nec tortor. Maecenas rhoncus felis vitae elit consectetur vitae mattis metus tincidunt. Donec nec ipsum quis tellus posuere ultricies. Ut tempus tortor nec sem blandit ut facilisis nisl scelerisque. Nulla venenatis ante sit amet nisi dictum varius. Etiam congue dui eu diam fermentum et tincidunt magna egestas. Sed tincidunt magna et metus molestie malesuada. Nam tempus dignissim porta. Vivamus iaculis, orci hendrerit condimentum viverra, eros nisl euismod arcu, nec pulvinar tellus elit eu nulla. Vestibulum mattis, ligula sit amet euismod commodo, augue lorem fermentum magna, et rhoncus nisl urna nec purus. Suspendisse potenti. Fusce fermentum orci at orci posuere ornare a imperdiet justo. In hac habitasse platea dictumst. Duis adipiscing leo nec risus varius auctor. Cras sed erat massa, quis egestas leo. Vivamus dignissim lacinia leo, ac interdum nisi facilisis eget.</p>
<div id="the_lights"></div>
</body>
</html> |
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.
(19 votes, average: 3.74 out of 5)
Loading ...
They can be a great start to launch a website of your own and meet the individual needs of your project.
This post has 15 comments
Yarden Refaeli
Why do you use primitive “document.getElementById” when you can use the powerful jQuery selector?
$(“#id”);
Thank you!
jake
And the path to jquery-1.3.2.min.js… is?
Jack
@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.
Alex
Great tutorial, Emanuele! This worked really well for me. Thanks.
George
Great Mod… only question whem this is posted what is the link to activate it…
Which link will show on the actual webpage?
Bishwajit Maitra
It’s good for “MOZILLA” but it does not work in “IE, Opera, Google Chrome”
Tony
it there any way to auto turn off the light want the page loaded? thank you.
Jose Daniel
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”;
});
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.
#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
Richard
…You’re an engineering genius! Thank you so much for the help!!!
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.
Thanks.
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!
Javier
This is great, I hope to get to work on my website.
iTechColumn
Great work.. Is it possible to make it work on mouse hover?? That would be interesting..
Jeet
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.