Note: For a list of revisions made, click here.
First of all, Happy Halloween to everyone, may all of your teeth rot from the gargantuan amount of candy that you will be consuming. I know I sound somewhat morbid, but the future doesn’t seem to be going to go well for me.
Well, with that said, if you’ve recently visited Apple’s website, you should’ve noticed that I made a cheap replica of their blackout effect. When I say cheap I mean it’s like those fake iPhones, similar, but not quite similar.
I tried to dissect Apple’s website source code but being the JavaScript illiterate that I am, I couldn’t find out much about the works of it. I searched on Google in hopes of finding the same effect that someone has made; But the only ones that showed up were paid ones, ranging from £5.00 to €5.99 ($8.02 to $8.35). I wasn’t going to pay for something simple like that. So I decided to make one my own. I have no prior knowledge on jQuery but how hard could it be right? In the end I took me about a day and a half to figure it out. FML
But because I hate people who charge money for simple and easy things like these, I am going to share my finding with everyone, and you will be allowed to take my code and do whatever you want with it, but I hold no responsibility if you fuck up. (Not that it’s possible as far as I know) The HTML code is validated as HTML5 and the CSS is validated as CSS 2.1. The code has been tested to be working on Safari 5.0.2, Firefox 4.0b6, Google Chrome 7.0.517.41, and Opera 10.63. I have no plans to test it on IE, but it’d be great if it works
Overlay HTML
The overlay is the black layer that covers the website when the fade in is executed. I created a different section just for that purpose
<section>
<article>
<div></div>
<p>Happy Halloween!</p>
<p>from seanooi.net</p>
</article>
</section>
The empty div in line 3 is for the blackout image. In my demo, it would be the image with a left and right hand print on each side of the image. The div element is used to ensure that the image will display on Opera as well
Overlay CSS
body>section
{
position: fixed;
top: 0;
left: 0;
background-color: #000;
width: 100%;
height: 100%;
}The position is set to fixed so that the background color covers the entire page and not only the viewable area of your web browser.
body>section>article>div
{
background: url('images/demo-blackout.png');
width: 625px;
height: 200px;
margin: 1em auto 0;
display: none;
}
body>section>article p
{
text-align: center;
font-family: Helvetica, Verdana, Sans-Serif;
color: #cc1100;
font-size: 48pt;
margin:.5em auto 0;
display: none;
}These 2 chunks of CSS is pretty much just positioning the image and text. But be sure that elements that you wish to fade in has to have the display: none; property in order for it to be able to fade in.
body>section>article, body>article
{
display: none;
width: 980px;
margin: 0 auto;
}These 2 tags have been set to display: none; as well to avoid the blackout images from flickering before it starts to fade in. body>article will be explained below
Main HTML
The main part of the page is just a few short lines for this demo.
<article>
<div></div>
<p>This is a demo mimicking <a href="http://www.apple.com">Apple's</a> blackout effect</p>
</article>
Main CSS
The body>article tag has been set to display: none; so that the page will not show before the blackout effect is ready, so we set it to fade in after the blackout effect executes.
body>article>div
{
background: url('images/demo.png');
width: 525px;
height: 200px;
margin: 1em auto 0;
}
body>article>p
{
text-align: center;
}Be sure that you position your page image below the blackout image so that when the blackout image fades out, it will be seen as if the image stayed.
jQuery
This is the part where I had a little difficulty with because I wasn’t literate in the language, but Google has been a big help to helping me find what I needed.
$(document).ready(function (){
$('section').find('article').delay(1000).fadeIn(1);
$('section').find('div').delay(1000).fadeIn(2000);
$('section').find('p').delay(3000).fadeIn(2000);
$('body').find('article').delay(4000).fadeIn(2000);
$('section').delay(6000).fadeOut(2000);
});As you can see, it’s pretty self explanatory. Take line 2 as an example
$('look for an element X').find('find the element within element X').delay(time it takes to execute the next command in milliseconds).fadeIn(time it takes to fade in in milliseconds);In line 5 we give body>article a 4 second delay before it fades in behind the overlay layer.
That’s all there is to it. If anyone has a better way of doing the same thing I did, please do drop me a message. I will be very interested to know about it. Any comments are welcome too.
Revision
November 12, 2010:
- I received a request yesterday for an IE version of my code, so I have just revised and uploaded a new set of codes that are compatible with IE.
- The post will still be explained in HTML5, so if you decide to go with the IE version, you’re on your own. But the code should be fairly straightforward.
