Full version: jsB@nk » Text » Animation » Spiral Text
URL: https://www.javascriptbank.com/spiral-text.html
This JavaScript code makes the text move around contiously when visitors click the button, you can cutomize by setting this effect in onload event without clicking button.
Full version: jsB@nk » Text » Animation » Spiral Text
URL: https://www.javascriptbank.com/spiral-text.html
<STYLE>.rotateOBJ {COLOR: silver; FILTER: Glow(Color=Black, Strength=5) Shadow(Color=Gray, Direction=135); FONT-FAMILY: Times New Roman; FONT-SIZE: 20pt; FONT-STYLE: italic; FONT-WEIGHT: bold; POSITION: relative; TEXT-ALIGN: center; WIDTH: 100%}#button {VISIBILITY: visible}#mysite {COLOR: silver; FILTER: Glow(Color=Black, Strength=5) Shadow(Color=Gray, Direction=135); VISIBILITY: hidden; WIDTH: 100%}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript>arrCos = new Array(361); /* Hold the COS lookup table for 0 to 360 deg */arrSin = new Array(361); /* Hold the SIN lookup table for 0 to 360 deg */for (i=0;i<=360;i++) { arrSin[i]=Math.sin(i*Math.PI/180); arrCos[i]=Math.cos(i*Math.PI/180);}function rotateleft(objID,x,y,r,deg,rinc) { /* objID - the ID of the object we're gonna manipulate * x - current object x-axis * y - current object y-axis * r - current object radius * deg - current rotation around axis in degrees * rinc - by how much we'll increment the radius this time */ y=r*arrSin[deg]; x=r*arrCos[deg]; document.all[objID].style.pixelLeft=x; document.all[objID].style.pixelTop=y+r+10; if (deg%60==0) r+=rinc; /* Has the radius reached it's maximum/minumum? If so, change the sign of the rinc * so that instead of incrementing we decrement - and visa versa */ if (r>60||r<10) { rinc*=-1; r+=rinc; } deg-=5; if (deg<=0) deg=360; setTimeout("rotateleft('"+objID+"',"+x+","+y+","+r+","+deg+","+rinc+")",10);}function rotateright(objID,x,y,r,deg,rinc) { /* objID - the ID of the object we're gonna manipulate * x - current object x-axis * y - current object y-axis * r - current object radius * deg - current rotation around axis in degrees * rinc - by how much we'll increment the radius this time */ y=r*arrSin[deg]; x=r*arrCos[deg]; document.all[objID].style.pixelLeft=x; document.all[objID].style.pixelTop=y+r+10; if (deg%60==0) r+=rinc; /* Has the radius reached it's maximum/minumum? If so, change the sign of the rinc * so that instead of incrementing we decrement - and visa versa */ if (r>60||r<10) { rinc*=-1; r+=rinc; } deg+=5; if (deg>=360) deg=0; setTimeout("rotateright('"+objID+"',"+x+","+y+","+r+","+deg+","+rinc+")",10);}function doit() {// not need in tnis script ---------------------// document.all.button.style.visibility='hidden';// document.all.mysite.style.visibility='visible';//----------------------------------------------- x=0; /* initial x-axis position */ y=0; /* initial y-axis position */ r=20; /* initial radius */ deg=0; /* initial rotation around axis (in degrees) */ rinc=1; /* radius increment */ /* Begin rotating each phrase with possible offsets to the initial values */ rotateright("obj2", x, y, r, deg, rinc); rotateleft("obj1", x, y, r, 360, rinc);}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE border=0 width="100%"> <TBODY> <TR> <TD align=middle vAlign=center width="50%"><SPAN class=rotateOBJ id=obj1>Spiral text left</SPAN> </TD> <TD align=middle vAlign=center width="50%"><SPAN class=rotateOBJ id=obj2>Spiral text right</SPAN> </TD></TR></TBODY></TABLE><INPUT id=button name=Button onclick=doit() type=button value="Click to spiral text"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->