Fade Text In on Page Load

Published 4 years, 10 months ago in design + dev

I learned a neat little HTML/Javascript trick on the about page of the newly launched Orkut from Google.

Here is the trick (let the page load entirely, then watch the next line (on smaller pages it’s much cooler… see the individual story archive page to see it happen the way it should really happen)):

This text will fade in on page load. But this text won’t (It’s displayed in-line as the page is built).

It’s accomplished with code that looks like this:

<html> <head> <script language="javascript"> col=255; function fade() { document.getElementById("fade").style.color="rgb(" + col + "," + col + "," + col + ")"; col-=5; if(col>0) setTimeout('fade()', 10); } </script> </head>


<body onLoad="fade()">
<p>

<span id="fade">This text will fade in.</span> But this text won't.

</p>

</body></html>

Pretty cool huh?

(If it doesn’t seem to work for you, it’s probably because this page loads pretty slowly… see the individual archive page for it to look more natural.)

8 Responses to “Fade Text In on Page Load”

Feed for this Entry

1 Scott Palmer Jan 23rd, 2004 at 12:34 pm

You could use an array and create a neat waterfall effect with this. I changed it already, but can’t post it here. If you’d like to see it, let me know.
2 jo Jan 24th, 2004 at 8:09 pm

i wanna see, i wanna see

very nice effect indeed.
3 Ryan Jan 25th, 2004 at 4:19 pm

Might have to see if that can be used to fade in images if you pre-load them. That would be pretty slick.
4 paul Jan 29th, 2004 at 11:30 pm

Hmm, interesting. Thanks for the demo (not all of us were favored with an invitation to Orkut).
5 Jannik Mar 19th, 2004 at 2:30 pm

Very nice. Is it possible to make it work on a black bagground - fading into white?
6 Jannik Mar 19th, 2004 at 3:04 pm

Found out is was…

Changing 225 to 0, col- to col+ and col>0 to col<255…
7 marc Feb 15th, 2006 at 3:32 pm

Hello,

very cool script but I just want to know why it doesn’t word on SPAN A HREF nor H tags?
8 andrew Apr 6th, 2008 at 12:01 pm

how would you slow the fade down or delay it?

Search

Advertise Here

inluminent