Webpage fade-in, how do you do that?

Hello everyone!

Quick question: I ran into a site ( www.thedirectory.org/pref/ ) and when the page loads, it fades in. Can someone point me to a tutorial or quick explanation of how to do that? I’m using Explorer 6.0

Thanks in advance…

Try this:


afaik opacity stuff is an explorer thing. I haven’t actually seen it work with firefox.

Thank you chris_fuel, just what I was looking for.

I didn’t see any fade in effect in Firefox, and when I tried in IE, still no effect. The page has this

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">

So it may be my re-view with IE didn’t constitute a “page-enter”. In any case, chris_fuel is correct, this is an IE only thing, most likely using CSS “filters”.

There is definetly a fade in effect in IE. I experienced it when the page was loaded.

No such effect for me in either FFox or IE6. There is nothing in the html to indicate that there is such a thing going on with that page.

I’d say it’s just the way it seems to load that makes it appear as if it is fading in.


@ablaye Maybe it’s my IE browser settings?

I learn something new everyday :slight_smile:
From http://www.cryer.co.uk/resources/javascript/html1.htm

Page-Enter Microsoft Internet Explorer 5.5+ only.

Specifies how the page should appear to replace the previous page in the browser.

For a summary of the transitions available see: http://www.jansfreeware.com/articles/ie-page-transitions.html.

The Microsoft documentation on page transitions can be viewed at: http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp, but be aware that this concentrates on applying transitions to styles. An interactive demonstration of filters and transitions can be found at http://msdn.microsoft.com/workshop/samples/author/dhtml/dxtidemo/dxtidemo.htm .
more interesting stuff at http://www.aim-higher.net/meta-transitions.asp

I can’t see it fading in either, but I know what you’re talking about, Iv’e seen it on other sites.

But why would you want something like that on your site? The page would take forever to load, and my computer will slow down during the fade-in. I’d say avoid the fanzy smanzy effects, they’re like splash pages.

i agree with you, i haven’t seen a site using those transitions since maybe '99. i would also stay away from those.

it only works on IE7.0 for me!
As many suggested stay away from those things!

I use IE 6.0 and it works for me, although I don’t know how they did it.

I know that IE uses filters, and that one of those is the alpha filter, which controls the transparency.

Firefox and Netscape (at least 8.0) does support transparency using the opacity property (which is a CSS3 feature), if you use this one you need to remember to go from 0.0 (fully transparent) to 1.0 (fully opaque)

Opera 7.5 doesn’t.


it might look like a cool thing in the first place, but in the pursue of creating a good site, please don’t use those tricks. Heck, don’t even use them in Power Point. You’ll fail on accessability graciously, and your site will not look professional at all. Keep all things clean, delete half of the scripts, then remove half of that half. Then see if you remove some more. Same goes with animated gifs, too much flash, music, popups, etc…


I don’t see any fade in that page.

What about this?

Fade effect !