JavaScripts -> Texteffekt -> Newton's Cradle

Mit diesem Script kann man das bekannte Schreibtischspielzeug simulieren: Der User klickt einen Buchstaben an, und der Text beginnt zu Schaukeln.

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
//Newton's Cradle v1.0 (c) 2003 Triple-M / http://www.htmlarsenal.de

//Benutzung: ein Script mit dem Inhalt newtonscradle(Text) an der Stelle, wo der Text hinsoll
//Usage: a script with the conten newtonscradle(text) at the position where the text shall be placed

var max=10; //Maximale Amplitude / maximum amplitude
var dec=.5; //Absinken / Decrease
var spd=20; //Geschwindigkeit / Speed

//Ab hier bitte nichts veraendern / Please do not change anything from here on

var n=new Array();
var amp=new Array();
var act=new Array();
var d=new Array();

function newtonscradle(text) {
  id="nc"+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; cursor:default" onClick="rockthecradle(\''+id+'\','+i+','+text.length+')">'+text.charAt(i)+'<\/span>');
  }
}

function keeprocking(id,length) {
  var i,e;
  act[id]+=d[id];
  if(act[id]>=amp[id]) {
    amp[id]-=dec;
    act[id]=Math.floor(amp[id]);
    d[id]=0-d[id];
  }
  if(act[id]<=(0-amp[id])) {
    amp[id]-=dec;
    act[id]=0-Math.floor(amp[id]);
    d[id]=0-d[id];
  }


  for(i=0;i<n[id];i++) {
    if(act[id]>=0) document.getElementById(id+i).style.left=(0-act[id])+"px";
    if(act[id]<=0) document.getElementById(id+(length-1-i)).style.left=(0-act[id])+"px";;
  }

  if(amp[id]>0)window.setTimeout("keeprocking('"+id+"',"+length+")",spd);
}

function rockthecradle(id,number,length) {
  if(isNaN(amp[id])) {
    amp[id]=0;
  }
  if(amp[id]) {
    for(i=0;i<length;i++) document.getElementById(id+i).style.left="0px";
  }
  old=amp[id];
  amp[id]=max;
  n[id]=number+1;
  act[id]=max;
  d[id]=-1;
  if(!(old>0))keeprocking(id,length);
}

//-->
</script>