Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Fading into page

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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.scrollTop];
     }
    
    }
    
    setTimeout(function(){
    new fade({
     ID:'overlay',
     Duration:2000
    });
    },1000);
    
    /*]]>*/
    </script>
    
    
    </body>
    
    </html>
    Last edited by vwphillips; 07-29-2011 at 01:29 PM. Reason: added fade out
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by vwphillips View Post
    Code:
    <!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.scrollTop];
     }
    
    }
    
    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?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    this could go in an external .js file

    Code:
    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.scrollTop];
     }
    
    }
    
    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);
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    seth.v.staden (07-29-2011)

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    awesome. thanx!

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    118
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Wow, thanks guys :-)
    Much appreciated. Will let you know how it goes.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •