Fade in on load?

jtyoungs · #1 Nov 6th, 2007, 15:51

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 · #2 Nov 6th, 2007, 16:00

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 · #3 Nov 6th, 2007, 16:52

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

Moving to JS forum

Lucleonhart · #4 Nov 7th, 2007, 10:47

You can try some Javascript here.. *g*

Code: Select all

<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 · #5 Nov 8th, 2007, 15:21

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 · #6 Nov 8th, 2007, 18:24

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 · #7 Nov 9th, 2007, 07:10

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

Code: Select all

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Video player preview Image fade to video	Lchad	Flash & Multimedia Forum	10	Sep 4th, 2007 15:37
fade out when new movie?	becccs	Flash & Multimedia Forum	2	Jul 28th, 2007 12:53
Mutiple images fade in and out	peebman2000	Flash & Multimedia Forum	5	Feb 15th, 2007 19:05
fade to white	christopher	Graphics and 3D	2	Jun 1st, 2006 12:02
Fade Out Option in sounds not working	autumn_whispers2me	Flash & Multimedia Forum	2	Feb 14th, 2005 21:37

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Fade in on load?