Floating Uncovering Background Animation

You can make no sense of this strange script name? Don't worry! Run the script and you will discover a new way to bring your background alive with just one image and almost zero configuration! You may add as many images as you like.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Configuration:

Step 1: add the following code to the <head> section of your page:

/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/

// CREDITS:
// Floating Uncovering Background Script
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.

// number of floating images
var numberofimages=4

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

// maximum width of the floating objects
var clipwidthmax=200

// maximum height of the floating objects
var clipheightmax=120

// 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()

if (document.all) {
	var preloadimage=new Image()
	preloadimage.src=imgurl
}

var tempo=30
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() {
	if (document.all) {
		checkposition()
		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
}

function movepictures() {
		if (document.all) {
			for (i=0;i<=numberofimages;i++) {  
    			var thisspan=eval("document.all.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() {
	if (document.all) {
		for (i=0;i<=numberofimages;i++) {             
			var thisspan=eval("document.all.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)
			}
		}
	}
}

// - End of JavaScript - -->
</script>

Step 2: insert the below code into the end section of the <BODY>. IMPORTANT: Do not insert the code below inside tables or <DIV> or <SPAN> or similar containers!

Step 3: go the <script> inside the <head> section and configure the URL of your image, the number of floating images as well as the width and height of the floating images