Fading into page

YourDirector

07-29-2011, 12:11 PM

Hey everyone,

What I need to do is have my website so when it loads on the homepage for the first time its starts of with a blank (specified color) background, then the logo fades in the middle, then a few seconds later that all fades away to reveal the website.

Is this possible without forwarding to separate pages and without flash?

Thanks all.

vwphillips

07-29-2011, 01:11 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#overlay {
position:absolute;z-Index:100;left:0px;top:0px;width:100%;height:2000px;background-Color:#FFFFCC;text-Align:center;
}

#overlay IMG{
position:relative;visibility:hidden;left:0px;top:0px;width:200px;height:150px;
}
/*]]>*/
</style>

</head>

<body>
Page Content
<div id="overlay" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>

<script type="text/javascript">
/*<![CDATA[*/
function fade(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0];
this.obj=obj;
var img=document.getElementById(o.ID).getElementsByTagName('IMG')[0];
img.style.top=this.wwhs()[1]/2-img.height/2+'px';
this.mS=o.Duration||1000;
this.animate(img,new Date(),0,100,true);
img.style.visibility='visible';
}

fade.prototype={

animate:function(obj,srt,f,t,sc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
this.now=Math.max(now,f<0||t<0?now:0);
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
if (ms<this.mS){
this.dly=setTimeout(function(){ oop.animate(obj,srt,f,t,sc); },10);
}
else if (sc){
this.animate(this.obj,new Date(),100,0,false);
}
else {
document.body.removeChild(obj);
}
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

}

setTimeout(function(){
new fade({
ID:'overlay',
Duration:2000
});
},1000);

/*]]>*/
</script>

</body>

</html>

seth.v.staden

07-29-2011, 01:21 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#overlay {
position:absolute;z-Index:100;left:0px;top:0px;width:100%;height:2000px;background-Color:#FFFFCC;text-Align:center;
}

#overlay IMG{
position:relative;visibility:hidden;left:0px;top:0px;width:200px;height:150px;
}
/*]]>*/
</style>

</head>

<body>
Page Content
<div id="overlay" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" /></div>

<script type="text/javascript">
/*<![CDATA[*/
function fade(o){
var oop=this;
var img=document.getElementById(o.ID).getElementsByTagName('IMG')[0];
img.style.top=this.wwhs()[1]/2-img.height/2+'px';
this.mS=o.Duration||1000;
this.animate(img,new Date(),0,100);
img.style.visibility='visible';
}

fade.prototype={

animate:function(obj,srt,f,t,sc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
this.now=Math.max(now,f<0||t<0?now:0);
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
if (ms<this.mS){
this.dly=setTimeout(function(){ oop.animate(obj,srt,f,t,sc); },10);
}
else {
document.body.removeChild(obj.parentNode);
}
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

}

setTimeout(function(){
new fade({
ID:'overlay',
Duration:2000
});
},1000);

/*]]>*/
</script>

</body>

</html>

I never even knew that was possible.
Im also very new to the webdesign world< how would you put that code into a website? i.e. i have my site coding, should i use that code on an external document and link it to my index.html or do i put it straight in?

vwphillips

07-29-2011, 01:41 PM

this could go in an external .js file

function fade(o){
var oop=this,obj=document.getElementById(o.ID),img=obj.getElementsByTagName('IMG')[0];
this.obj=obj;
img.style.top=this.wwhs()[1]/2-img.height/2+'px';
this.mS=o.Duration||1000;
this.animate(img,new Date(),0,100,true);
img.style.visibility='visible';
}

fade.prototype={

animate:function(obj,srt,f,t,sc){
var oop=this,ms=new Date().getTime()-srt,now=Math.floor(sc=='s'?(t-f)*Math.sin(this.inc*ms)+f:sc=='c'?t-(t-f)*Math.cos(this.inc*ms):(t-f)/this.mS*ms+f);
this.now=Math.max(now,f<0||t<0?now:0);
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
if (ms<this.mS){
this.dly=setTimeout(function(){ oop.animate(obj,srt,f,t,sc); },10);
}
else if (sc){
this.animate(this.obj,new Date(),100,0,false);
}
else {
document.body.removeChild(obj);
}
},

wwhs:function(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

}

function Init(){
setTimeout(function(){
new fade({
ID:'overlay',
Duration:2000
});
},1000);
}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

seth.v.staden

07-29-2011, 01:44 PM

awesome. thanx!

YourDirector

07-29-2011, 04:05 PM

Wow, thanks guys :-)
Much appreciated. Will let you know how it goes.