Free JavaScript: Floating Background Image Animation

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript: Floating Background Image Animation

Configuration

Step 1:

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com
// right into the webpage where the script will be displayed.

// START OF CONFIGURATION ZONE ///////////////////////////////////////////
// number of floating images
var numberofimages=4

// URL of your background-image
var imgurl="bgimgfloat.jpg"

// maximum width of the floating objects (pixels
var clipwidthmax=180

// maximum height of the floating objects (pixels)
var clipheightmax=120

// END OF CONFIGURATION ZONE ///////////////////////////////////////////
// do not edit the variables below
var floatingspeed=20
var clipleft=new Array()
var clipright=new Array()
var cliptop=new Array()
var clipbottom=new Array()
var clipwidth=new Array()
var clipheight=new Array()

var preloadimage=new Image()
preloadimage.src=imgurl

var tempo=50
numberofimages=numberofimages-1

var shift_x=Math.floor(numberofimages/2)*-1
var shift_y=Math.floor(numberofimages/2)*-1
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofimages;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()

var marginbottom=0
var marginleft=0
var margintop=0
var marginright=0
var timer

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

function movepictures() {
	for (i=0;i<=numberofimages;i++) {  
    	var thisspan=eval("document.getElementById('flyimage"+(i)+"').style")
    	clipleft[i]+=stepx[i]
		clipright[i]=clipleft[i]+clipwidth[i]
		cliptop[i]+=stepy[i]
		clipbottom[i]=cliptop[i]+clipheight[i]
		thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
    }
}

function checkposition() {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.getElementById('flyimage"+(i)+"').style")
			if (clipright[i]>marginright) {	
				clipleft[i]-=Math.abs(stepx[i])
				clipright[i]=clipleft[i]+clipwidth[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (clipleft[i]<marginleft) {
				clipleft[i]+=Math.abs(stepx[i])
				clipright[i]=clipleft[i]+clipwidth[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (clipbottom[i]>marginbottom) {
				cliptop[i]-=Math.abs(stepy[i])
				clipbottom[i]=cliptop[i]+clipheight[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepy[i]=randommaker(floatingspeed)*-1
			}
			if (cliptop[i]<margintop) {
				cliptop[i]+=Math.abs(stepy[i])
				clipbottom[i]=cliptop[i]+clipheight[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepy[i]=randommaker(floatingspeed)
			}
		}
}

for (i=0;i<=numberofimages;i++) {
	document.write("<DIV id='flyimage"+i+"' style='position:absolute;visibility:hidden'></DIV>")
}
window.onload=setValues
</script>

Step 2: