Full version: jsB@nk » Text » Animation » Shake Rattle and Grow
URL: https://www.javascriptbank.com/shake-rattle-and-grow.html
Cross-Browser Effect that displays three Phrases. It does what it says, Shakes, Rattles and Grows.
Full version: jsB@nk » Text » Animation » Shake Rattle and Grow
URL: https://www.javascriptbank.com/shake-rattle-and-grow.html
<SCRIPT language=JavaScript type=text/javascript><!--////////////////////////////////////////////////////////////////////////////////obj={ message:new Array(3),garray:new Array(50,60,70,80,90,100),spans:"",MINS:0,MAXS:2,T:20,ArrayID:0,bool:true,booleans:true, bools:true,bools2:true,a:true,b:true,IDNo:0,FS:30,// - FS = Font Sizecnt:0,cnt2:0,xntr:0,cntr:0,cntr2:0, obj:function(){// document.getElementsByTagName('body').item(0).style.backgroundColor="black"; this.message=["JavaScriptBank.com", 'Bank of over', '2000+ free JavaScripts', "Enter"];},creatSpans:function(ArrayID,lcount){ this.spans=document.createElement('span');this.spans.id="sid"+(lcount-1);with(this.spans.style){ position="relative";color="white";fontWeight=900;fontSize=this.FS;}if(this.message[ArrayID].substring(lcount,lcount-1)!=" ") this.spans.innerHTML=this.message[ArrayID].substring(lcount,lcount-1);else this.spans.innerHTML="<b style='visibility:hidden'>_</b>";document.getElementById('marker').appendChild(this.spans);},delSpans:function(IDNo){ oldElem=document.getElementById("sid"+IDNo);currentElem=document.getElementById('marker');currentElem.removeChild(oldElem);},animSpans:function(){ if(this.bool){ for(var x=0;x<this.message[this.IDNo].length;x++) { document.getElementById('sid'+x).style.left=this.MAXS;document.getElementById('sid'+x).style.color="lightblue";if(x==this.message.length-1) this.bool=false; }}else if(this.booleans){ for(var x=0,y=this.posL;x<this.message[this.IDNo].length;x++) { document.getElementById('sid'+x).style.left=this.MINS; this.posL-=2;if(x==this.message.length-1) this.booleans=false; }}else if(this.cnt<7){ this.bool=this.booleans=true; this.cnt+=1;}else if(this.bools){ for(var x=0;x<this.message[this.IDNo].length;x++) document.getElementById('sid'+x).style.letterSpacing=this.MAXS;this.bools=false;}else if(this.bools2){ for(var x=0;x<this.message[this.IDNo].length;x++) document.getElementById('sid'+x).style.letterSpacing=this.MINS;this.bools2=false;}else if(this.cnt2<3){ this.bools=this.bools2=true;this.cnt2++;}else if(this.a){ for(var x=0;x<this.message[this.IDNo].length;x++) obj.delSpans(x); gcount++;this.IDNo++; this.a=false;} else if(this.b){ for(var x=1;x<=obj.message[this.IDNo].length;x++) obj.creatSpans(gcount,x);this.b=false;}else if(this.cntr<3){ this.bool=this.booleans=true;this.cnt=0;this.bools=this.bools2=true;this.cnt2=0;this.cntr++; if(this.xntr<this.message.length-2) { this.a=this.b=true; this.xntr++; }}else if(this.cntr2<this.garray.length){ this.T=100; for(var x=0;x<this.message[gcount].length;x++) document.getElementById('sid'+x).style.fontSize=this.garray[this.cntr2]; this.cntr2++;} setTimeout("obj.animSpans();",this.T);}}////////////////////////////////////////////////////////////////////////////////window.onload=main;var gcount=0;function main(){ obj.obj(); for(var x=1;x<=obj.message[gcount].length;x++) obj.creatSpans(gcount,x); obj.animSpans(gcount,0);}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=holder style="TEXT-ALIGN: center"><SPAN id=marker></SPAN></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->