FLOATING BACKGROUND IMAGES

[Hape]

Du kannst diesen seltsamen Skriptnamen nicht verstehen? Mach dir keine Sorgen! Führen dieses kostenlose JavaScript aus und du wirst eine neue Art der Diashow entdecken, um den Hintergrund mit nur einem Bild und fast ohne Konfiguration zum Leben zu erwecken!

Code: Alles auswählen

<script>
// CREDITS:
// Floating Background Image JavaScript
// by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com/fast/index.html

// 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 setValues() {
	marginleft=0
	margintop=0
    marginbottom=document.body.clientHeight
    marginright=document.body.clientWidth
	for (i=0;i<=numberofimages;i++) {             	
		clipheight[i]=randommaker(clipheightmax)+50
		clipwidth[i]=randommaker(clipwidthmax)+50
		clipleft[i]=randommaker(marginright)-clipwidth[i]
		cliptop[i]=randommaker(marginbottom)-clipheight[i]
	}
	for (i=0;i<=numberofimages;i++) { 
		var opacitystrength=randommaker(80)
		var opacitystrengthff=opacitystrength/100
		var thisspan=eval("document.getElementById('flyimage"+(i)+"')")
		thisspan.innerHTML="<img src='"+imgurl+"' width='"+marginright+"' height='"+marginbottom+"' style='filter:alpha(opacity="+opacitystrength+");'>"
		thisspan=eval("document.getElementById('flyimage"+(i)+"').style")         	
        thisspan.left=0
		thisspan.top=0
		thisspan.opacity=opacitystrength/100
		thisspan.visibility="visible"
	}
	checkmovement()
}

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>

Demoseite hier: Floating Background Images