Full version: jsB@nk » Text » Animation » Colorfull Flying Messages
URL: https://www.javascriptbank.com/colorfull-flying-messages.html
This JavaScript makes your messages float through your webpage. The movement is driven by a smart random-function that changes the speed and direction for each message separately. Add as many messages as you like. Each message can be linked separately.
Full version: jsB@nk » Text » Animation » Colorfull Flying Messages
URL: https://www.javascriptbank.com/colorfull-flying-messages.html
<SCRIPT><!-- Beginning of JavaScript -// FlyingMessages// Floating messages. Add as many messages as you like.// ATTENTION: Too many images may slow down the floating effect.var message=new Array()message[0]="Text JavaScript effects"message[1]="Image JavaScript effects"message[2]="Scroller JavaScript effects"message[3]="Game JavaScript effects"// You may add a link for each message.// In case you do not want to link a message just add a '#' instead of an URLvar message_link=new Array()message_link[0]="http://JavaScriptBank.com/javascript/text-javascript.html"message_link[1]="http://JavaScriptBank.com/javascript/image-javascript.html"message_link[2]="http://JavaScriptBank.com/javascript/scroller-javascript.html"message_link[3]="http://JavaScriptBank.com/javascript/game-javascript.html"// font-family for each messagevar message_font=new Array()message_font[0]="Comic Sans MS"message_font[1]="Times"message_font[2]="Courier"message_font[3]="Verdana"message_font[4]="Arial"// font-size for each messagevar message_fontsize=new Array()message_fontsize[0]=14message_fontsize[1]=12message_fontsize[2]=10message_fontsize[3]=9message_fontsize[4]=8// font-color for each messagevar message_fontcolor=new Array()message_fontcolor[0]="yellow"message_fontcolor[1]="black"message_fontcolor[2]="FF0000"message_fontcolor[3]="007700"message_fontcolor[4]="000077"// backgroundcolor for each messagevar message_bgcolor=new Array()message_bgcolor[0]="black"message_bgcolor[1]="yellow"message_bgcolor[2]="FFDDDD"message_bgcolor[3]="DDFFDD"message_bgcolor[4]="DDDDFF"// font-weight for each message. Choose a value between 1 and 9var message_fontweight=new Array()message_fontweight[0]=1message_fontweight[1]=9message_fontweight[2]=5message_fontweight[3]=7message_fontweight[4]=9// width for each message (pixels)var message_width=new Array()message_width[0]=300message_width[1]=200message_width[2]=300message_width[3]=200message_width[4]=100// padding for each message (pixels)var message_padding=new Array()message_padding[0]=4message_padding[1]=4message_padding[2]=4message_padding[3]=4message_padding[4]=3// padding for each message (pixels)var message_border=new Array()message_border[0]=1message_border[1]=1message_border[2]=1message_border[3]=1message_border[4]=1// average speed of the floating images. Higher means fastervar floatingspeed=3// do not edit the variables belowvar tempo=20var numberofmessages=message.length-1var stepx=new Array()var stepy=new Array()for (i=0;i<=numberofmessages;i++) {stepx[i]=randommaker(floatingspeed)stepy[i]=randommaker(floatingspeed)}var imgwidth=new Array()var imgheight=new Array()for (i=0;i<=numberofmessages;i++) {imgwidth[i]=10imgheight[i]=10}var x,yvar marginbottomvar marginleft=0var margintop=0var marginrightvar timerfor (i=0;i<=numberofmessages;i++) { message_fontweight[0]=100*message_fontweight[0] message_fontweight[1]=100*message_fontweight[1] message_fontweight[2]=100*message_fontweight[2] message_fontweight[3]=100*message_fontweight[3] message_fontweight[4]=100*message_fontweight[4]}var spancontent=new Array()for (i=0;i<=numberofmessages;i++) { spancontent[i]="<table border="+message_border[i]+" cellpadding="+message_padding[i]+" width="+message_width[i]+" cellspacing=0><tr><td valign=top bgcolor="+message_bgcolor[i]+">" spancontent[i]+="<span style='position:relative; font-family:"+message_font[i]+";font-size:"+message_fontsize[i]+"pt;font-weight:"+message_fontweight[i]+"'>" spancontent[i]+="<a href='"+message_link[i]+"' style='text-decoration:none'>" spancontent[i]+="<font color="+message_fontcolor[i]+">" spancontent[i]+=message[i] spancontent[i]+="</a>" spancontent[i]+="</span>" spancontent[i]+="</td></tr></table>"}function setValues() {if (document.all) { marginbottom=document.body.clientHeight-5 marginright=document.body.clientWidth-5for (i=0;i<=numberofmessages;i++) { var thisspan = eval("document.all.span"+i) thisspan.innerHTML=spancontent[i]var thisspan = eval("document.all.span"+(i)+".style") thisspan.posLeft=randommaker(marginright)thisspan.posTop=randommaker(marginbottom) }for (i=0;i<=numberofmessages;i++) {var thisspan = eval("document.all.span"+i)imgwidth[i]=thisspan.offsetWidthimgheight[i]=thisspan.offsetHeight}checkmovement()}}function randommaker(range) {rand=Math.floor(range*Math.random())if (rand==0) {rand=Math.ceil(range/2)} return rand}function checkmovement() {if (document.all) {checkposition()movepictures() timer=setTimeout("checkmovement()",tempo)}}function movepictures() {if (document.all) {for (i=0;i<=numberofmessages;i++) { var thisspan=eval("document.all.span"+(i)+".style") thisspan.posLeft+=stepx[i]thisspan.posTop+=stepy[i] }}}function checkposition() {if (document.all) {for (i=0;i<=numberofmessages;i++) { var thisspan=eval("document.all.span"+i+".style")if (thisspan.posLeft>marginright-imgwidth[i]) {thisspan.posLeft-=Math.abs(stepx[i]+1)stepx[i]=randommaker(floatingspeed)*-1}if (thisspan.posLeft<marginleft) {thisspan.posLeft+=Math.abs(stepx[i])stepx[i]=randommaker(floatingspeed)}if (thisspan.posTop>marginbottom-imgheight[i]) {thisspan.posTop-=Math.abs(stepy[i])stepy[i]=randommaker(floatingspeed)*-1}if (thisspan.posTop<margintop) {thisspan.posTop+=Math.abs(stepy[i])stepy[i]=randommaker(floatingspeed)}}}}// - End of JavaScript - --></SCRIPT><BODY id=thisbody onload=setValues()><SCRIPT><!-- Beginning of JavaScript -for (i=0;i<=numberofmessages;i++) { document.write("<span id='span"+i+"' style='position:absolute;z-index:100'></span>") document.close()}// - End of JavaScript - --></SCRIPT></BODY>