Home/ Questions/Q 7020023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T23:15:49+00:00

If you have a look at Apple’s Mac page on their website. http://www.apple.com/mac/ Their

  • 0

If you have a look at Apple’s Mac page on their website. http://www.apple.com/mac/
Their “body” displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you’ll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.

I’m looking for something similar to this for my website. I don’t want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready… The only problem is, they don’t use any kind of display:none; for their body. They’re a bit more careful about that, because if the JS file fails, the content will still display.

How can I make this? They way they do it must be lightweight because anybody can write something like 

$(document).ready(function() {
    $('div#content_area').attr(class, loaded revealed);
});

All I need to do is add the .slide() function and hide the content until the page loads.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Have found out that Apple has all it’s elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this

    div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}

    Here’s my version, http://jsfiddle.net/dqUaX/1/

    What’s great about it is:

    1. Opacity is considered a CSS3 attribute so if a browser is outdated the content won’t hide.
    2. I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
    3. Since you’ll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn’t have to load.

    Pretty awesome no?

    You must put the script before the end of the <body> closing tag…

    • 0