background image fade in?

**lenglain** · 12-16-2011, 04:04 PM

hi guys after much trial and error I figured out how to make divs fade in or slide in on page load after a defined amount of time using jquery (so that some divs fade into view shortly after others do.)

For my next trick (and I didn't realize how tricky this would be) I wanted to overlap two divs, so that the top one fades in quickly, but the one below it fades in slowly (like a shadow coming into view...)

I think the image gives an idea of what I'm trying to do.

Originally I wanted to just have the background image kind of float left to right while fading in and out but that seems to be wayy too fancy for me.

Is it possible to have the top text stay put while a separate div fades in and out behind it?

**vwphillips** · 12-17-2011, 09:17 AM

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[*/

.parent {
  position:relative;overflow:hidden;left:100px;top:100px;width:500px;height:50px;border:solid red 1px;
}

.bg {
  position:absolute;left:-50px;top:0px;width:600px;height:50px;font-Size:50px;text-Align:center;color:red;
}

.top {
  position:absolute;left:0px;top:0px;width:500px;height:50px;font-Size:50px;text-Align:center;background-Color:#FFFFCC;
}

/*]]>*/
</style></head>

<body>
<input type="button" name="" value="Fade In" onmouseup="NL.Fade(true);" />
<input type="button" name="" value="Fade Out" onmouseup="NL.Fade(false);" />
 <div id="tst" class="parent" >
  <div class="bg" >NIGHT LIFE</div>
  <div class="top" >NIGHT LIFE</div>
 </div>

<script type="text/javascript">
/*<![CDATA[*/

function NightLife(o){
 var p=document.getElementById(o.ID),objs=p.getElementsByTagName('DIV'),srt=o.BGStart;
 objs[0].style.left=srt+'px';
 this.cngstyle('opacity',objs[0],0);
 this.cngstyle('opacity',objs[1],0);
 this.objs=objs;
 this.mm=[srt,o.BGFinish];
 this.bgms=o.BGDuration;
 this.topms=o.TopDuration;
 this.now=0;
}

NightLife.prototype={

 Fade:function(ud){
  var objs=this.objs,now=this.now,to=ud?100:0;
  this.animate('left',objs[0],objs[0].offsetLeft,this.mm[ud?1:0],new Date(),this.bgms);
  this.animate('opacity',objs[0],this.now,to,new Date(),this.bgms);
  this.animate('opacity',objs[1],this.now,to,new Date(),this.topms);
 },

 animate:function(mde,obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   oop.cngstyle(mde,obj,now);
   if (mde=='opacity'){
    this.now=now;
   }
  }
  if (ms<mS){
   setTimeout(function(){ oop.animate(mde,obj,f,t,srt,mS); },10);
  }
  else {
   oop.cngstyle(mde,obj,t);
   if (mde=='opacity'){
    this.now=t;
   }
  }
 },

 cngstyle:function(mde,obj,now){
  switch (mde){
   case 'opacity':
    obj.style.filter='alpha(opacity='+now+')';
    obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
    break;
   default:
    obj.style[mde]=now+'px';
    break;
  }
 }

}

 var NL=new NightLife({
 ID:'tst',
 BGStart:350,
 BGFinish:-50,
 BGDuration:2000,
 TopDuration:3000

});
/*]]>*/
</script>
</body>

</html>

Thread: background image fade in?

Thread Tools

Search Thread

background image fade in?

Bookmarks

Bookmarks

Posting Permissions