JavaScripts -> Texteffekt -> Welleneffekt (MouseOver)

Mit diesem MouseOver-Effekt läuft eine Welle durch Ihren Text.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
//WaveLink v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de
//Benutzung: einfach ein Script mit dem Inhalt wavelink("Text") an der Stelle wo der Text hinsoll
//Usage: a script with the content wavelink("text") at the position where the text shall be placed

var maxheight=10; //Max. Amplitude der Welle / maximum amplitude of the wave
var step=2; //Flankensteilheit / steepness
var speed=20; //Geschwindigkeit / speed

//Bitte ab hier nichts veraendern / Please do not change anything from here on

var waveposition=new Array();
var waveheight=new Array();
var waverunning=new Array();
var wavedir=new Array();
var waveto=new Array();

function wavelink(text) {
  id="wl"+Math.floor(Math.random()*10000)+"_";
  for(i=0;i<text.length;i++) {
    document.write('<span id="'+id+i+'" style="position:relative; left:0px; top:0px" onMouseOver="startthewave(\''+id+'\','+text.length+')" onMouseOut="stopthewave(\''+id+'\')">'+text.charAt(i)+'<\/span>');
  }
}


function dothewave(id,length) {

  if(waverunning[id] && (waveheight[id]<maxheight)) {
    waveheight[id]+=step;
    if(waveheight[id]>maxheight)waveheight[id]=maxheight;
  }
  else if((waverunning[id]==0) && (waveheight[id]>0)) {
    waveheight[id]-=step;
  }
  if(waveheight[id]<=0) {
    waveheight[id]=0;
    waveto[id]=0;
    return;
  }
  waveposition[id]+=wavedir[id];
  if(waveposition[id]>=length) {
    waveposition[id]=length-2;
    wavedir[id]=0-wavedir[id];
  }
  if(waveposition[id]<0) {
    waveposition[id]=1;
    wavedir[id]=0-wavedir[id];
  }
  for(i=0;i<length;i++)document.getElementById(id+i).style.top="0px";
  document.getElementById(id+waveposition[id]).style.top="-"+waveheight[id]+"px";
  for(i=0;i<Math.floor(waveheight[id]/step);i++) {
    if(waveposition[id]-i>=0) {
      document.getElementById(id+(waveposition[id]-i)).style.top="-"+(waveheight[id]-(i*step))+"px";
    }
    if(waveposition[id]+i<length) {
      document.getElementById(id+(waveposition[id]+i)).style.top="-"+(waveheight[id]-(i*step))+"px";
    }
  }
  waveto[id]=window.setTimeout("dothewave('"+id+"',"+length+")",speed);
}

function startthewave(id,length) {
  if(isNaN(waveheight[id])) {
    waveposition[id]=1;
    waveheight[id]=0;
    waverunning[id]=1;
    wavedir[id]=1;
    waveto[id]=0;
  }
  if(!waverunning[id]) {
    waverunning[id]=1;
  }
  if(waveto[id]==0)waveto[id]=window.setTimeout("dothewave('"+id+"',"+length+")",speed);

}

function stopthewave(id) {
  waverunning[id]=0;

}


//-->
</script>