Logo www.praast.de

html by praast

Fading Text

Hier der Quelltext:

<script language="javascript" type="text/javascript">
// Original by Stefan Klinger  manitou@gmx.net
// erweitert durch Michael Praast www.praast.de
var ie =
 ((document.all) && (window.offscreenBuffering)) 
 ? true : false; 
var nn = 
 ((document.captureEvents) && (!document.getElementById)) 
 ? true : false; 
var mz = 
 ((document.getElementById) && (!document.all) && 
 (document.documentElement)) ? true : false;
var which=0;    //momentaner Message-Nummer in der Schleife
var color= "";  //momentaner Farbwert als Hex-String
var fade=1;     //1=einblenden -1=ausblenden
var r=0;        //momentaner Rot-Wert in der Schleife
var g=0;        //momentaner GrÜn-Wert in der Schleife
var b=0;        //momentaner Blau-Wert in der Schleife
r_start=255;   //Start=Weiß    
g_start=255;
b_start=255;
r_end=0;       //Ziel=Schwarz 
g_end=0;
b_end=0;
step=5;        //Schrittweite
var message= new Array();
message[0]='Wooooooooooow !!!!!!!'
message[1]='So tolle Sachen kann man mit'
message[2]='DynamicHTML & Javascript machen'
message[3]='Nicht schlecht gell?????'
// Add as many as you like
function hex_it(zahl) {
 if (zahl==0) return("0"); if (zahl==1) return("1");
 if (zahl==2) return("2"); if (zahl==3) return("3"); 
 if (zahl==4) return("4"); if (zahl==5) return("5");
 if (zahl==6) return("6"); if (zahl==7) return("7"); 
 if (zahl==8) return("8"); if (zahl==9) return("9"); 
 if (zahl==10) return("A"); if (zahl==11) return("B");
 if (zahl==12) return("C"); if (zahl==13) return("D"); 
 if (zahl==14) return("E"); if (zahl==15) return("F");
}
function byte_to_hex(zahl) {
 wert1=Math.floor(zahl/16);   //geteilt durch 16
 wert2=zahl-(wert1*16);       //Rest
 wert=hex_it(wert1) + hex_it(wert2);
 return(wert);
}
function animate(){
 color="#"+byte_to_hex(r)+byte_to_hex(g)+byte_to_hex(b);
 if (nn) 
 {     // Netscape4
 document.animatedtext.document.writeln("<center>
  <font color="+color+" size=+2><NOBR><strong>"+message[which]+
  "</strong></NOBR></font><center>");
 document.animatedtext.document.close();
 }
 if (ie) 
 {     // IExplorer 4
 document.all.animatedtext.innerHTML="<center><font color="+
  color+" size=+2><NOBR><strong>"+message[which]+
  "</strong></NOBR></font></center>";
 }
 if (mz) 
 {     // Mozilla/NN6
 document.getElementById('animatedtext').innerHTML="<center>
  <font color="+color+" size=+2><NOBR><strong>"+
  message[which]+"</strong></NOBR></font></center>";
 }
 if (fade==1) 
  {       //einblenden
  if (r_start<r_end) {if (r<r_end) r+=step; else r=r_end;}
   else {if (r>r_end) r-=step;}
  if (g_start<g_end) {if (g<g_end) g+=step; else g=g_end;}
   else {if (g>g_end) g-=step;}
  if (b_start<b_end) {if (b<b_end) b+=step; else b=b_end;}
   else {if (b>b_end) b-=step;}
  }
 else 
  {               //ausblenden
  if (r_start<r_end) {if (r>r_start) r-=step; else r=r_start;}
   else {if (r<r_start) r+=step;}
  if (g_start<g_end) {if (g>g_start) g-=step; else g=g_start;}
   else {if (g<g_start) g+=step;}
  if (b_start<b_end) {if (b>b_start) b-=step; else b=b_start;}
   else {if (b<b_start) b+=step;}
  }
// Einblenden beendet => Ausblenden
 if ((r==r_end) && (g==g_end) &&(b==b_end)) {fade=-1;}
// Wieder Ausblenden beendet => nächste Message einblenden
 if ((r==r_start) && (g==g_start) &&(b==b_start)) 
  {
  fade=1;r=r_start;g=g_start;b=b_start;
  if (which<message.length-1) which+=1;
   else which=0;
  }
 setTimeout('animate()',50);
}
function init() {
 r=r_start;
 g=g_start;
 b=b_start;
 setTimeout('animate()',150);
}
// -->
</script>

in den Body-Tag schreibst du:

<body onLoad="init()">

Und nun noch die Area wo der "Fading Text" hinsoll:

<div id="animatedtext" 
        style="position:absolute;left:4;top:80"></div>

Download von fadein.htm als zip-Datei hier: Script laden.

Kontakt/Feedback