JavaScripts -> Texteffekt -> Welleneffekt (MouseOver)
Mit diesem MouseOver-Effekt läuft eine Welle durch Ihren Text.
Kompatibilität getestet:
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>
<!--
//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>