Fade-out text when spacebar is pressed?

**katerpillar1** · 11-23-2012 04:37 AM

Hi all,

I'm a beginner at JS and I'd like to write a code where, when the spacebar is pressed, a line of text fades into the screen. When the spacebar is pressed again, that line of text fades out and a new line of text fades in, and so on.

Any help would be appreciated. Thanks all!

**vwphillips** · 11-23-2012 08:10 AM

you could use fade

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>
</head>

<body>
<div id="tst" style="position:relative;width:50px;" >Word</div>


<script type="text/javascript">


function zxcFadeWord(o){
 this.obj=document.getElementById(o.ID);
 this.ary=o.WordArray;
 this.ms=o.FadeDuration;
 this.cnt=0;
 this.run=true;
 this.addevt(document,'keypress','space');
 this.addevt(document,'keydown','space');
}

zxcFadeWord.prototype={

 space:function(e){
  var char=e.which?e.which:event.keyCode ;
  if (char==32&&this.run){
   this.run=false;
   clearTimeout(this.dly);
   this.fade(this.obj,100,0,new Date(),this.ms);
  }
 },

 fade:function(obj,f,t,srt,mS){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style.filter='alpha(opacity='+now+')';
   obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.fade(obj,f,t,srt,mS); },10);
  }
  else if (t==0){
   oop.cnt=++oop.cnt%oop.ary.length;
   obj.innerHTML=oop.ary[oop.cnt];
   this.fade(obj,0,100,new Date(),this.ms);
  }
  else {
   oop.run=true;
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
  }
 }


}

new zxcFadeWord({
 ID:'tst',
 WordArray:['Tom','Dick','Harry'],
 FadeDuration:1000
});



</script>
</body>

</html>

but color is better

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>
</head>

<body>
<span id="tst" >Word</span>

<script type="text/javascript">


function zxcFadeWord(o){
 this.obj=document.getElementById(o.ID);
 this.ary=o.WordArray;
 this.ms=o.FadeDuration;
 this.fin=o.FadeIn;
 this.fout=o.FadeOut;
 this.cnt=0;
 this.run=true;
 this.addevt(document,'keypress','space');
 this.addevt(document,'keydown','space');
}

zxcFadeWord.prototype={

 space:function(e){
  var char=e.which?e.which:event.keyCode ;
  if (char==32&&this.run){
   this.run=false;
   clearTimeout(this.dly);
   this.fade(this.obj,this.fin,this.fout,new Date(),this.ms,true);
  }
 },

 fade:function(obj,f,t,srt,mS,nxt){
  var oop=this,ms=new Date().getTime()-srt,now=[],z0=0//=(t-f)/mS*ms+f;
  for (;z0<3;z0++){
   now[z0]=Math.round((t[z0]-f[z0])/mS*ms+f[z0]);
  }
  if (isFinite(now[0])&&isFinite(now[1])&&isFinite(now[2])){
   obj.style.color='rgb('+now[0]+','+now[1]+','+now[2]+')';
  }
  if (ms<mS){
   oop.dly=setTimeout(function(){ oop.fade(obj,f,t,srt,mS,nxt); },10);
  }
  else {
   obj.style.color='rgb('+t[0]+','+t[1]+','+t[2]+')';
   if (nxt){
    obj.innerHTML=oop.ary[oop.cnt];
    oop.fade(obj,oop.fout,oop.fin,new Date(),this.ms,false);
    oop.cnt=++oop.cnt%oop.ary.length;
   }
   else {
    oop.run=true;
   }
  }
 },

 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
  }
 }


}

new zxcFadeWord({
 ID:'tst',
 WordArray:['Tom','Dick','Harry'],
 FadeIn:[0,0,0],
 FadeOut:[255,255,255],
 FadeDuration:1000
});


</script>
</body>

</html>

**katerpillar1** · 11-23-2012 09:12 PM

Thanks for your reply!

Sorry for my inexpertise, but I pasted the code (both of them) into two separate Notepad documents and saved them as HTML files, but when opened in a browser they only display 'Word' and nothing happens when I click the screen. Did I do something wrong?

Thanks again

**katerpillar1** · 11-23-2012 09:16 PM

My bad, I tried it on my other laptop (my first laptop had a semi-broken keyboard, hence the spacebar didn't work) and it works perfectly with the spacebar.

Thank you very much phillips!

Thread: Fade-out text when spacebar is pressed?

Thread Tools

Display

Fade-out text when spacebar is pressed?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions