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:
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>
<!--
//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>