Fade in on load?

jtyoungs · November 6th, 2007, 11:51 AM

Was just doing some looking around, came across this site. when i clicked on the link from google in fades in to the page somehow, curious to know how it's done! great effect!

http://www.ihaveawebsite-nowwhat.co.uk/

not sure if you can see it, im using IE 6.

EDIT

it doesn't work in that link so it's the fourth down on this search

http://www.google.co.uk/search?hl=en...ff&q=seo&meta=

delusion · November 6th, 2007, 12:00 PM

hmm.. doesn't seem to work in FireFox..

[edit] It works in IE7.. I see what you mean.. try hotscripts.com seems like Javascript..

karinne · November 6th, 2007, 12:52 PM

Yeah ... those are IE only styles ... like the scrollbar thingy.

Moving to JS forum

Lucleonhart · November 7th, 2007, 06:47 AM

You can try some Javascript here.. *g*

Code:

<html>
<head>
<script type='text/javascript'>
var timer;
var opacity = 0;

function fadein()
{
opacity += 1;

document.body.style.opacity = opacity/10;
document.body.style.filter = 'alpha(opacity=' + opacity*10 + ')';

if(opacity == 10)
window.clearInterval(timer);

}

onload = new Function("timer = window.setInterval('fadein()',100);");

</script>
</head>
<body style='opacity:0; filter:alpha(opacity=0);'>
[BODY IN HERE]
</body>
</html>

See in action here: http://projects.lucleonhart.de/fade.html
Works in all Browser i can test (FF, IE, Opera, Safari)

digilover · November 8th, 2007, 11:21 AM

When it comes to creating visual effect, stay away from any browser dependent code and give either scriptaculous or jquery a try.

Sales folk love transitions

James.

alexgeek · November 8th, 2007, 02:24 PM

That works in both IE6 and FF.
I quite like it! But I'm not sure what happens when you lots of images loading etc.

Lucleonhart · November 9th, 2007, 03:10 AM

That code is quite browser independent my friend.. you may add

Code:

document.body.style.KhtmlOpacity = opacity/10;

to support Konquerer and Safari.

I've added that to my startpage.. works great. (Reload page after all gfx has loaded to see the full effect ^^)
http://www.lucleonhart.de/index2.php