Fading Effects

Dieses Tutorial besteht aus fading text, fading background und fading scrollbars

Fading Text

Dieser Text fadet in den Farben Rot und blau hin und her :D

icedale.de Fading Text

Füge diesen Code in den Head-bereich ein:

<script type = "text/javascript"> //Created by Fader Maker (http://www.bosiljak.hr/fadermaker/) var fmTimer = null; var fmfg = false; function fminit(){ if (!document.getElementById) return; fma1=0xFF; fma2=0x00; fma3=0x00; fma4=0x00; fma5=0x00; fma6=0xFF; if (!fmfg){ fmtemp=fma1; fma1=fma4; fma4=fmtemp; fmtemp=fma2; fma2=fma5; fma5=fmtemp; fmtemp=fma3; fma3=fma6; fma6=fmtemp; } fmfg = !fmfg; fmFade(); } function fmToHex(n){ var hexChars = "0123456789ABCDEF"; if (n == 0) return "00"; var j, n; var temp = ""; while (n != 0){ j = n % 16; n = (n - j)/16; temp = hexChars.charAt(j) + temp; } if (temp.length < 2){ temp = "0" + temp; } return temp; } function fmFade(){ obj = document.getElementById('tekst').style; fmcolor = "#" + fmToHex(fma1) + fmToHex(fma2) + fmToHex(fma3); obj.color = fmcolor; if (fma1 != fma4){ if (fma4 > fma1){fma1++;} else{fma1--;}} if (fma2 != fma5){ if (fma5 > fma2){fma2++;} else{fma2--;}} if (fma3 != fma6){ if (fma6 > fma3){fma3++;} else{fma3--;}} if ((fma1 == fma4) && (fma2 == fma5) && (fma3 == fma6)){ window.clearTimeout(fmTimer); fminit()} else{ fmTimer = window.setTimeout("fmFade()",50); } } onload = fminit </script>

Natürlich musst du die farben verändern. Und das geht so:

fma1=0xFF; fma2=0x00; fma3=0x00;

fma4=0x00; fma5=0x00; fma6=0xFF;

dies sind zwei zeilen code. Wenn du also die Farbe FFFFFF in die Farbe 000000 überlaufen lassen, sieht der code so aus:

fma1=0xFF; fma2=0xFF; fma3=0xFF;

fma4=0x00; fma5=0x00; fma6=0x00;

diesen code in den body-bereich, dort wo der text hinsoll:

<span id="tekst" style="font-size:14px; font-family: Verdana, Geneva, sans-serif; letter-spacing:normal; font-weight:normal; font-style:normal; padding-left:20px; padding-right:20px;">icedale.de Fading Text</span>

Fading Background

Du willst, dass deine hintergrundfarbe in eine andere farbe überläuft ?!

Wie man die Farben verändert kannst du bei "fading text" lesen

<span id="tekst" style="font-size:14px; font-family: Verdana, Geneva, sans-serif; letter-spacing:normal; font-weight:normal; font-style:normal; padding-left:20px; padding-right:20px;">icedale.de Fading Text</span>

Fading Scrollbars

Jhaa sogar die scrolllbars können ihre farben verändern :)

Mach diesen code in den head-bereich:

<script type = "text/javascript"> //Created by Fader Maker (http://www.bosiljak.hr/fadermaker/) var fmTimer = null; var fmscroll = false; function fminit(){ if (!document.getElementById) return; fmd1=0xff; fmd2=0x00; fmd3=0x00; fmd4=0x00; fmd5=0x00; fmd6=0xff; if (!fmscroll){ fmtemp=fmd1; fmd1=fmd4; fmd4=fmtemp; fmtemp=fmd2; fmd2=fmd5; fmd5=fmtemp; fmtemp=fmd3; fmd3=fmd6; fmd6=fmtemp; } fmscroll = !fmscroll; fmFade(); } function fmToHex(n){ var hexChars = "0123456789ABCDEF"; if (n == 0) return "00"; var j, n; var temp = ""; while (n != 0){ j = n % 16; n = (n - j)/16; temp = hexChars.charAt(j) + temp; } if (temp.length < 2){ temp = "0" + temp; } return temp; } function fmFade(){ obj = document.getElementById('tekst').style; if (document.body.style.scrollbarFaceColor){ fmscrollcolor = "#" + fmToHex(fmd1) + fmToHex(fmd2) + fmToHex(fmd3); document.body.style.scrollbarFaceColor = fmscrollcolor; if (fmd1 != fmd4){ if (fmd4 > fmd1){fmd1++;} else{fmd1--;}} if (fmd2 != fmd5){ if (fmd5 > fmd2){fmd2++;} else{fmd2--;}} if (fmd3 != fmd6){ if (fmd6 > fmd3){fmd3++;} else{fmd3--;}} } else{fmd1=fmd2=fmd3=fmd4=fmd5=fmd6=0} if ((fmd1 == fmd4) && (fmd2 == fmd5) && (fmd3 == fmd6) ){ window.clearTimeout(fmTimer); fminit()} else{ fmTimer = window.setTimeout("fmFade()",50); } } onload = fminit </script>

wie du die farben veränderst liest du bei fading text.

~back