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:
.