طائر ياحبيبي طائر
ثلاثة خطوات لعمل هذا التأثير
احفظ الصورة الأتية في مجلد صفحتك
<head>انسخ هذا الكود في
<script> <!-- Beginning of JavaScript - // عدد الصور var numberofimages=4 // عنوان صوراتك var imgurl="bgimgfloat.jpg" // اقصى عرض للكائن[الصورة] var clipwidthmax=200 // اقصى ارتفاع كائن[الصورة] 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(50) 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>انسخ هذا الكود تحت واصفة
<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>