Take A Look On My Dancing Text?

[web_designer 7]

Hi everyone, here is another effect on text. In fact I love text effects or better say java script effects. But from my bad luck all the websites I did are formal so I can't use it in them. But I am really thinking to make a funny and cool website where I can put all the effects I want in it. So enjoy this one



Put this code in header

<script>  <!-- Beginning of JavaScript -     //you can add your phrases in here  var mes = new Array()  mes[0]="hi guest"  mes[1]="welcome to my webdite"  mes[2]="keep in touch"  mes[3]="never miss the news"     var path= new Array(554,9,552,10,550,13,542,13,538,13,532,10,528,9,528,9,522,7,519,8,512,9,510,11,507,13,505,16,500,17,495,18,492,17,488,15,482,9,477,9,473,9,466,12,461,17,459,19,452,20,448,21,443,18,439,15,434,9,431,9,424,8,419,9,416,11,412,12,410,15,408,17,406,19,398,19,391,20,383,19,379,17,372,14,369,10,364,9,356,7,348,8,340,9,334,11,323,13,315,17,301,18,293,17,288,12,285,10,278,7,274,7,269,9,268,9,265,12,260,17,250,17,241,17,229,16,220,10,216,9,213,9,208,9,203,9,194,14,188,16,177,16,166,16,157,14,149,13,146,8,135,7,124,6,114,9,104,14,94,16,69,16,61,15,41,15,34,15,22,16,12,16,13,15)     // you can change stopping time from here  var stoptime=2     // you can change text font and text size from here  var textfont="Arial"  var textsize=24     // Configure a selction of of textcolors (as many as you like)  var textcolor=new Array("FF0000","0000FF","00FF00","FF00FF")     // Fontweight: 1 for bold, 0 for normal  var fontweight=5     // Set 1 to apply a trendy glow-effect  // Set 0 to apply no glow effect  // ATTENTION: the glow-effect will slow down the speed dramatically  var gloweffect=0     // The space (pixels) between the letters. If you have chosen a big fontsize   // you should increase this number  var letterspace=12     var tickerleft=path[path.length-2]  var tickertop=path[path.length-1]  var timer  var finalxpos=tickerleft  var i_mes=0  var message=""  var i_path=0  var stoptimemilli=stoptime*10  var maxtextlength=0  var i_endposition=0     var pathx= new Array()  var ii=0  for (i=0;i<=path.length-1;i=i+2) {              pathx[ii]=path[i]              ii++  }  ii=0  var pathy= new Array()  for (i=1;i<=path.length-1;i=i+2) {              pathy[ii]=path[i]              ii++  }     if (gloweffect==1) {              gloweffect="style='filter:glow(strength=1,color=yellow)'"  }  else {              gloweffect=""  }     if (fontweight==1) {              fontweight="<b>"  }  else {              fontweight=""  }        for (i=0;i<=mes.length-1;i++) {              if (mes[i].length>=maxtextlength) {maxtextlength=mes[i].length}  }     for (i=0;i<=mes.length-1;i++) {              mes[i]=mes[i]+" "  }     if (document.layers) {              if (textsize>20) {textsize=6}              else if (textsize>20) {textsize=5}              else if (textsize>14) {textsize=4}               else if (textsize>10) {textsize=3}              else if (textsize>8) {textsize=2}              else if (textsize<=7) {textsize=1}  }     var xpos=new Array()  for (i=0;i<=maxtextlength;i++) {              xpos[i]=5000  }     var ypos=new Array()  for (i=0;i<=maxtextlength;i++) {              ypos[i]=5000  }     function randomizer(range) {                               return Math.floor(range*Math.random())  }     function makesnake() {              if (i_path<=pathx.length-1) {                          for (i=message.length-1; i>=1; i--) {                                      xpos[i]=xpos[i-1]                                      ypos[i]=ypos[i-1]              }                          xpos[0]=pathx[i_path]                          ypos[0]=pathy[i_path]                          if (document.all) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.all.span"+(i)+".style")                                      thisspan.posLeft=xpos[i]+(i*letterspace)                                                  thisspan.posTop=ypos[i]                          }                          }                          if (document.layers) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.span"+i)                                      thisspan.left=xpos[i]+(i*letterspace)                                                  thisspan.top=ypos[i]                          }                          }                          i_path++                          timer=setTimeout("makesnake()",20)              }              else {                          clearTimeout(timer)                          endposition()              }  }        function endposition() {              if (i_endposition<=stoptimemilli) {                          if (document.all) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.all.span"+(i)+".style")                                                  thisspan.posTop+=Math.ceil(8*Math.random())-4                          }                          }                          if (document.layers) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.span"+i)                                                  thisspan.top+=Math.ceil(8*Math.random())-4                          }                          }                          i_endposition++                          timer=setTimeout("endposition()",10)              }              else {                          clearTimeout(timer)                          i_endposition=0                          endposition2()              }  }     function endposition2() {              if (i_endposition<=30) {                          if (document.all) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.all.span"+(i)+".style")                                                  thisspan.posTop+=Math.ceil(200*Math.random())-70                          }                          }                          if (document.layers) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan = eval("document.span"+i)                                                  thisspan.top+=Math.ceil(200*Math.random())-70                          }                          }                          i_endposition++                          timer=setTimeout("endposition2()",20)              }              else {                          clearTimeout(timer)                          i_endposition=0                          clearmessage()              }  }        function clearmessage() {                          finalxpos=tickertop                          i_path=0                          for (i=0;i<=maxtextlength;i++) {                                      xpos[i]=5000                          }                          if (document.all) {                                      for (i=0;i<=maxtextlength;i++) {                                                  var thisspan = eval("document.all.span"+i)                                      thisspan.innerHTML=" "                                                  var thisspan = eval("document.all.span"+(i)+".style")                                      thisspan.posLeft=xpos[i]=5000                                      }                          }                          if (document.layers) {                                      for (i=0;i<=maxtextlength;i++) {                                                  var thisspan = eval("document.span"+i+".document")                                      thisspan.write("<p> </p>")                                                  thisspan.clear()                                                  thisspan = eval("document.span"+i)                                      thisspan.left=5000                                      }                          }                          timer=setTimeout("changemessage()",2000)  }     function changemessage() {                          var messa=mes[i_mes]                          message=messa.split("")                          if (document.all) {                                      for (i=0;i<=message.length-1;i++) {                                                  var thisspan = eval("document.all.span"+i)                                      thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor[Math.floor((textcolor.length)*Math.random())]+"'>"+fontweight+message[i]+"</p>"                                      }                          }                          if (document.layers) {                                      for (i=0; i<message.length-1; i++) {                                      var thisspan=eval("document.span"+i+".document")                                      thisspan.write("<p><font size="+textsize+" color="+textcolor[Math.floor((textcolor.length)*Math.random())]+" face="+textfont+">"+fontweight+message[i]+"</font></p>")                                                  thisspan.clear()                          }                          }                          i_mes++                           if (i_mes>=mes.length) {i_mes=0}                          finalxpos=tickertop                          i_path=0                          timer=setTimeout("makesnake()",1000)  }     // - End of JavaScript - -->  </SCRIPT>     <STYLE>A {              COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 8px; POSITION: absolute; TOP: 250px  }  .spanstyle {              LEFT: 5000px; POSITION: absolute; VISIBILITY: visible  }  </STYLE>

And put this line inside body brackets

document.write(message)

document.write("</span>")

}



// - End of JavaScript - -->

</SCRIPT>



linenums:0'><script> <!-- Beginning of JavaScript - for (i=0;i<=maxtextlength;i++) { document.write("<span id='span"+i+"' class='spanstyle' "+gloweffect+">") document.write(message) document.write("</span>") } // - End of JavaScript - --> </SCRIPT>

I wanted to to show you how it will looks like, but I couldn't find a hosting to upload the example.

So if anyone knows a good host just let me know, enjoy.

[evilsmiley25 0]

There are a few spelling mistakes I have noticed, but otherwise, good job. :)I will upload it to this free host I currently use, and see how it looks

[web_designer 7]

sorry if there is a spelling mistake and thank you to your cooperate with me. but i think i mistaken with the codebox or something like that because the the codebox look so wide, and i don't know why. i used the codebox because i get a notice from the moderator last time. so, i didn't want to repeat that again. but i am just new in forums.

[Soviet Rathe 1]

I couldn't get it to work :/ I tried in HTML and PHP file and wouldn't work :/

[web_designer 7]

i checked the code and i couldn't find anything wrong, but just in case that i missed
a dot or semi colon will give you the whole source here and if you are familiar with java script you can
understand it or you can copy and past it in your browse. or see in my first post how i divide it. by the way if you are using firefox or opera then nothing will appears, so you should unblock the java script from the setting or you can try it in internet explorer. it works fine with me.

<html><head><script><!-- Beginning of JavaScript -//you can add your phrases in herevar mes = new Array()mes[0]="hi guest"mes[1]="welcome to my webdite"mes[2]="keep in touch"mes[3]="never miss the news"var path= new Array(554,9,552,10,550,13,542,13,538,13,532,10,528,9,528,9,522,7,519,8,512,9,510,11,507,13,505,16,500,17,495,18,492,17,488,15,482,9,477,9,473,9,466,12,461,17,459,19,452,20,448,21,443,18,439,15,434,9,431,9,424,8,419,9,416,11,412,12,410,15,408,17,406,19,398,19,391,20,383,19,379,17,372,14,369,10,364,9,356,7,348,8,340,9,334,11,323,13,315,17,301,18,293,17,288,12,285,10,278,7,274,7,269,9,268,9,265,12,260,17,250,17,241,17,229,16,220,10,216,9,213,9,208,9,203,9,194,14,188,16,177,16,166,16,157,14,149,13,146,8,135,7,124,6,114,9,104,14,94,16,69,16,61,15,41,15,34,15,22,16,12,16,13,15)// you can change stopping time from herevar stoptime=2// you can change text font and text size from herevar textfont="Arial"var textsize=24// Configure a selction of of textcolors (as many as you like)var textcolor=new Array("FF0000","0000FF","00FF00","FF00FF")// Fontweight: 1 for bold, 0 for normalvar fontweight=5// Set 1 to apply a trendy glow-effect// Set 0 to apply no glow effect// ATTENTION: the glow-effect will slow down the speed dramaticallyvar gloweffect=0// The space (pixels) between the letters. If you have chosen a big fontsize // you should increase this numbervar letterspace=12var tickerleft=path[path.length-2]var tickertop=path[path.length-1]var timervar finalxpos=tickerleftvar i_mes=0var message=""var i_path=0var stoptimemilli=stoptime*10var maxtextlength=0var i_endposition=0var pathx= new Array()var ii=0for (i=0;i<=path.length-1;i=i+2) {    pathx[ii]=path[i]    ii++}ii=0var pathy= new Array()for (i=1;i<=path.length-1;i=i+2) {    pathy[ii]=path[i]    ii++}if (gloweffect==1) {    gloweffect="style='filter:glow(strength=1,color=yellow)'"}else {    gloweffect=""}if (fontweight==1) {    fontweight="<b>"}else {    fontweight=""}for (i=0;i<=mes.length-1;i++) {    if (mes[i].length>=maxtextlength) {maxtextlength=mes[i].length}}for (i=0;i<=mes.length-1;i++) {    mes[i]=mes[i]+" "}if (document.layers) {    if (textsize>20) {textsize=6}    else if (textsize>20) {textsize=5}    else if (textsize>14) {textsize=4}     else if (textsize>10) {textsize=3}    else if (textsize>8) {textsize=2}    else if (textsize<=7) {textsize=1}}var xpos=new Array()for (i=0;i<=maxtextlength;i++) {    xpos[i]=5000}var ypos=new Array()for (i=0;i<=maxtextlength;i++) {    ypos[i]=5000}function randomizer(range) {            return Math.floor(range*Math.random())}function makesnake() {    if (i_path<=pathx.length-1) {        for (i=message.length-1; i>=1; i--) {               xpos[i]=xpos[i-1]            ypos[i]=ypos[i-1]        }        xpos[0]=pathx[i_path]        ypos[0]=pathy[i_path]        if (document.all) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.all.span"+(i)+".style")                thisspan.posLeft=xpos[i]+(i*letterspace)                thisspan.posTop=ypos[i]            }        }        if (document.layers) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.span"+i)                thisspan.left=xpos[i]+(i*letterspace)                thisspan.top=ypos[i]            }        }        i_path++        timer=setTimeout("makesnake()",20)    }    else {        clearTimeout(timer)        endposition()    }}function endposition() {    if (i_endposition<=stoptimemilli) {        if (document.all) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.all.span"+(i)+".style")                thisspan.posTop+=Math.ceil(8*Math.random())-4            }        }        if (document.layers) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.span"+i)                thisspan.top+=Math.ceil(8*Math.random())-4            }        }        i_endposition++        timer=setTimeout("endposition()",10)    }    else {        clearTimeout(timer)        i_endposition=0        endposition2()    }}function endposition2() {    if (i_endposition<=30) {        if (document.all) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.all.span"+(i)+".style")                thisspan.posTop+=Math.ceil(200*Math.random())-70            }        }        if (document.layers) {            for (i=0; i<message.length-1; i++) {                var thisspan = eval("document.span"+i)                thisspan.top+=Math.ceil(200*Math.random())-70            }        }        i_endposition++        timer=setTimeout("endposition2()",20)    }    else {        clearTimeout(timer)        i_endposition=0        clearmessage()    }}function clearmessage() {        finalxpos=tickertop        i_path=0        for (i=0;i<=maxtextlength;i++) {            xpos[i]=5000        }        if (document.all) {            for (i=0;i<=maxtextlength;i++) {                var thisspan = eval("document.all.span"+i)                thisspan.innerHTML=" "                var thisspan = eval("document.all.span"+(i)+".style")                thisspan.posLeft=xpos[i]=5000            }        }        if (document.layers) {            for (i=0;i<=maxtextlength;i++) {                var thisspan = eval("document.span"+i+".document")                thisspan.write("<p> </p>")                thisspan.clear()                thisspan = eval("document.span"+i)                thisspan.left=5000            }        }        timer=setTimeout("changemessage()",2000)}function changemessage() {        var messa=mes[i_mes]        message=messa.split("")        if (document.all) {            for (i=0;i<=message.length-1;i++) {                var thisspan = eval("document.all.span"+i)                thisspan.innerHTML="<p style='font-family:"+textfont+";font-size:"+textsize+";color:"+textcolor[Math.floor((textcolor.length)*Math.random())]+"'>"+fontweight+message[i]+"</p>"            }        }        if (document.layers) {            for (i=0; i<message.length-1; i++) {                var thisspan=eval("document.span"+i+".document")                thisspan.write("<p><font size="+textsize+" color="+textcolor[Math.floor((textcolor.length)*Math.random())]+" face="+textfont+">"+fontweight+message[i]+"</font></p>")                thisspan.clear()            }        }        i_mes++         if (i_mes>=mes.length) {i_mes=0}        finalxpos=tickertop        i_path=0        timer=setTimeout("makesnake()",1000)}// - End of JavaScript - --></SCRIPT><STYLE>A {    COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 8px; POSITION: absolute; TOP: 250px}.spanstyle {    LEFT: 5000px; POSITION: absolute; VISIBILITY: visible}</STYLE></head><BODY onload=changemessage()><script><!-- Beginning of JavaScript -    for (i=0;i<=maxtextlength;i++) {        document.write("<span id='span"+i+"' class='spanstyle' "+gloweffect+">")        document.write(message)        document.write("</span>")    }// - End of JavaScript - --></SCRIPT></body></html>