Farbenwechsler Javascript - Kostenlose-Javascripts.de

(121 Bewertungen, ∅ 3,35 von 5)
Du musst eingeloggt sein um bewerten zu können.

Dies ist ein kleines Javascript welches den Text farbig animiert.

Es funktioniert im Internet Explorer und mit dem Opera-Browser, jedoch leider nicht im Mozilla Firefox.

Dieses JS-Script kann Text farbig animieren!

Natürlich auch in Grün

und selbstverständlich auch in Blau

Besucht www.kostenlose-javascripts.de

document.write('<div id="Text1">Dieses JS-Script kann Text farbig animieren!</div>');
document.write('<div id="Text2">Natürlich auch in Grün</div>');
document.write('<div id="Text3">und selbstverständlich auch in Blau</div>');
document.write('<a href="https://www.kostenlose-javascripts.de" id="Text4">Besucht www.kostenlose-javascripts.de</div>');

function Dez2Hex(dez)
  {
    var xchars = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
    var lower;
    var higher;
    lower = dez % 16
    higher = Math.round(dez/16) % 16;
    return xchars[lower]+xchars[higher];
  }

function TxtAnim_NextStep()
  {
    var i;
    var txt;
    var diff;
    var color;
    this.HotChar++;
    if (this.HotChar == this.myText.length)
      this.HotChar=0;

txt="";
    for(i=0;i<this.myText.length;i++)    
    {
      diff = Math.abs(this.HotChar-i);
      color = (diff*this.StepColor);
      switch (this.CTA)
      {
        case 0:  txt=txt+"<font color='#"+Dez2Hex(Math.round(color))+"0000'>"+this.myText.charAt(i)+"</font>"; break;
        case 1:  txt=txt+"<font color='#00"+Dez2Hex(Math.round(color))+"00'>"+this.myText.charAt(i)+"</font>"; break;
        case 2:  txt=txt+"<font color='#0000"+Dez2Hex(Math.round(color))+"'>"+this.myText.charAt(i)+"</font>"; break;
      }
    }
   
    document.getElementById(this.id).innerHTML=txt;
  }

function TxtAnim(ColorToAnimate, Id)
  {
    this.myText = document.getElementById(Id).innerText;
    this.StepColor = 255/this.myText.length;
    this.HotChar = 0;
    this.CTA = ColorToAnimate;
    this.NextStep = TxtAnim_NextStep;
    this.id = Id;
  }
  
  var animtext;
  animtext= new Array();

function RefreshAnim(index)
  { 
    animtext[index].NextStep();
    setTimeout('RefreshAnim('+index+')', 100);    
  }

// Ab hier änderungen vornehmen:
//animtext[x] = new TxtAnim(Farbe, 'Id des Blockes');

animtext[0] = new TxtAnim(0, 'Text1');
  animtext[1] = new TxtAnim(1, 'Text2');
  animtext[2] = new TxtAnim(2, 'Text3');
  animtext[3] = new TxtAnim(3, 'Text4');
//-->
</script>
<br />
JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/texteffekte/farbenwechsler/" target="_blank">kostenlose-javascripts.de</a>
<br />
<script type="text/javascript">  RefreshAnim(0); RefreshAnim(1);
  RefreshAnim(2); RefreshAnim(3);</script>

Farbenwechsler

7 Kommentare

Schreibe einen Kommentar Antworten abbrechen