Full version: jsB@nk » Background » Floating Uncovering Background Animation
URL: https://www.javascriptbank.com/floating-uncovering-background-animation.html
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.
Full version: jsB@nk » Background » Floating Uncovering Background Animation
URL: https://www.javascriptbank.com/floating-uncovering-background-animation.html
<SCRIPT>/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/<!-- Beginning of JavaScript -// Floating Uncovering Background Script// Author: Peter Gehrig // Web Site: http://www.24fun.com // number of floating imagesvar numberofimages=4// URL of your imagevar imgurl="../image/pic191.jpg"// maximum width of the floating objectsvar clipwidthmax=200// maximum height of the floating objectsvar clipheightmax=120// do not edit the variables belowvar floatingspeed=20var 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=30numberofimages=numberofimages-1var shift_x=Math.floor(numberofimages/2)*-1var shift_y=Math.floor(numberofimages/2)*-1var 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=0var marginleft=0var margintop=0var marginright=0var timerfunction setValues() {if (document.all) {marginleft=0margintop=0 marginbottom=document.body.clientHeight marginright=document.body.clientWidthfor (i=0;i<=numberofimages;i++) { clipheight[i]=randommaker(clipheightmax)+50clipwidth[i]=randommaker(clipwidthmax)+50clipleft[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=0thisspan.posTop=0thisspan.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><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=setValues()><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></body><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->