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.)
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.
i wanna see, i wanna see
very nice effect indeed.
Might have to see if that can be used to fade in images if you pre-load them. That would be pretty slick.
Hmm, interesting. Thanks for the demo (not all of us were favored with an invitation to Orkut).
Very nice. Is it possible to make it work on a black bagground – fading into white?
Found out is was…
Changing 225 to 0, col- to col+ and col>0 to col<255…
Hello,
very cool script but I just want to know why it doesn’t word on SPAN A HREF nor H tags?
how would you slow the fade down or delay it?
Can you make a fade out demo also please? Would be really great, thanks!
yes….a demo would be nice…….I don’t know the language………..
Excellent piece of code…should be easily understood by any novice programmer!
Hello,
nice piece of code! But how cani change the fading text color from black e.g into #979797! i don’t understand how can i do this!