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>