color back
Heel mooi script, die een dynamisch effect geeft. Wel wat moeilijk om aan te passen, maar als je een beetje handig bent lukt het wel....je kunt de rectangles en het images aanpassen.....!
<html> <head> <TITLE>vliegende-achtergrond</TITLE> <meta NAME="keywords" CONTENT="DHTML, JavaScript, animation, image, background, Dynamic HTML, download, free, float, samples, applet"> <meta NAME="description" CONTENT="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. Internet Explorer 4 or higher."> </head> <script> <!-- Beginning of JavaScript - // 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 setValues() { if (document.all) { 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(60) var thisspan=eval("flyimage"+i) thisspan.innerHTML="<img src='"+imgurl+"' width='"+marginright+"' height='"+marginbottom+"' style='filter:alpha(opacity="+opacitystrength+")'>" thisspan=eval("document.all.flyimage"+i+".style") thisspan.posLeft=0 thisspan.posTop=0 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() { 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> <body bgcolor="#000000" link="#FF9933" vlink="#00FFFF"> <form> <font size=1 face=Verdana color=000000><ul><br> <script> if (document.all) { for (i=0;i<=numberofimages;i++) { document.write("<DIV id='flyimage"+i+"' style='position:absolute;visibility:hidden'></DIV>") } window.onload=setValues } </script> </font> </form> </body> </html>