»
EnglishFrenchVietnamese

Print - First ticker worming its way through your webpage - JavaScriptBank.com

Full version: jsB@nk » Text » Animation » First ticker worming its way through your webpage
URL: https://www.javascriptbank.com/first-ticker-worming.html

First ticker worming its way through your webpage © JavaScriptBank.comThis is the first textscroller capable of wriggling though your webpage like a snake. The script allows you not only to configure fontsize, fontcolor and fontfamily, you may even configure the path by simply using your favourite imagemap-tool (without programming). See instructions inside the script.

Full version: jsB@nk » Text » Animation » First ticker worming its way through your webpage
URL: https://www.javascriptbank.com/first-ticker-worming.html



CSS
<STYLE>.spanstyle {LEFT: 5000px; POSITION: absolute; VISIBILITY: visible}</STYLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<SCRIPT><!-- Beginning of JavaScript -// ###############################################################################// INSTRUCTIONS:// Configure the script as follows:// ###############################################################################var mes = new Array()mes[0]="JavaScriptBank.com"mes[1]="Bank of over 2000+ free JavaScripts"// The path array contains the path of the newsworm. How can you configure this path? Best way:// 1. Produce an empty (white) gif-image with your graphic-tool, size about 1000x800 pixels.// 2. Open the application that you are using to create imagemaps (for instance CuteMAP).// 3. Open this gif-image.// 4. Set the drawing-tool to "polygon".// 5. Draw a path.// 6. Copy and paste the resulting values (x,y coordinates) inside the path-array below. // ATTENTION: There should be no space between the numbers!!!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)// thoi gian truoc khi chu roi xuong trinh duyetvar stoptime=20// font chu, co chuvar textfont="Arial"var textsize=25// mau chuvar textcolor=new Array("FF0000","0000FF","00FF00","FF00FF")// 1: chu in dam; 0: chu binh thuongvar fontweight=1// hieu ung loc cho chu, 1: su dung; 0: khong su dungvar gloweffect=0// khoang cach giua cac chuvar letterspace=15// ###############################################################################// INSTRUCTIONS:// End of instructions part. No need to change the variables below.// ###############################################################################var 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=0endposition2()}}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=0clearmessage()}}function clearmessage() {finalxpos=tickertopi_path=0for (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=tickertopi_path=0timer=setTimeout("makesnake()",1000)}// - End of JavaScript - --></SCRIPT><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->