« »

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.

Label: colorfull, flying, message, FlyingMessages, float, movement, smart

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<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 URL
var 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 message
var 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 message
var message_fontsize=new Array()
message_fontsize[0]=14
message_fontsize[1]=12
message_fontsize[2]=10
message_fontsize[3]=9
message_fontsize[4]=8

// font-color for each message
var 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 message
var 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 9
var message_fontweight=new Array()
message_fontweight[0]=1
message_fontweight[1]=9
message_fontweight[2]=5
message_fontweight[3]=7
message_fontweight[4]=9

// width for each message (pixels)
var message_width=new Array()
message_width[0]=300
message_width[1]=200
message_width[2]=300
message_width[3]=200
message_width[4]=100

// padding for each message (pixels)
var message_padding=new Array()
message_padding[0]=4
message_padding[1]=4
message_padding[2]=4
message_padding[3]=4
message_padding[4]=3

// padding for each message (pixels)
var message_border=new Array()
message_border[0]=1
message_border[1]=1
message_border[2]=1
message_border[3]=1
message_border[4]=1

// average speed of the floating images. Higher means faster
var floatingspeed=3

// do not edit the variables below
var tempo=20
var numberofmessages=message.length-1
var 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]=10
	imgheight[i]=10
}
var x,y
var marginbottom
var marginleft=0
var margintop=0
var marginright
var timer
for (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-5
		for (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.offsetWidth
			imgheight[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>

Copy All x2

<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>