خلفية ثلأثية الأبعاد

اربعة خطوات لعمل هذا التأثير

اضغط هنا لتري التأثير

احفظ احدا الصورتين

لاتنسي ان تغير عنوان الصورة التي تريد

<head>انسخ هذا الكود في

<SCRIPT LANGUAGE="JavaScript"> // مكان عنوان صورة الخلفية var imgsrc="bgimgstretch3D1.jpg" //قوة التأثير var stretchstrength=2.0 // لاتخلبص تحت هذا الكود ياعسل var pause=100 var imgpreload=new Image() imgpreload.src=imgsrc var screenwidth=0 var screenheight=0 var imgwidthA var imgheightA var imgwidthB var imgheightB var imgwidthC var imgheightC var imgwidthD var imgheightD var x_step=0 var y_step=0 var max_step=20 var clipleft var clipright var cliptop var clipbottom function initiate() { x_step=0 y_step=0 if (document.layers) { screenwidth=window.innerWidth screenheight=window.innerHeight imgwidthA=screenwidth imgheightA=screenheight setnewsize() } if (document.all) { screenwidth=document.body.clientWidth screenheight=document.body.clientHeight imgwidthA=screenwidth imgheightA=screenheight setnewsize() } } function newpos() { if (document.all) { bgimageA.innerHTML="<img src="+imgsrc+" width="+imgwidthA+" height="+imgheightA+">" bgimageB.innerHTML="<img src="+imgsrc+" width="+imgwidthB+" height="+imgheightB+">" bgimageC.innerHTML="<img src="+imgsrc+" width="+imgwidthC+" height="+imgheightC+">" bgimageD.innerHTML="<img src="+imgsrc+" width="+imgwidthD+" height="+imgheightD+">" document.all.bgimageA.style.posLeft=0 document.all.bgimageA.style.posTop=0 clipleft=0 clipright=imgwidthA/2 cliptop=0 clipbottom=imgheightA/2 document.all.bgimageA.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.bgimageB.style.posLeft=imgwidthA/2-imgwidthB/2 document.all.bgimageB.style.posTop=0 clipleft=imgwidthB/2 clipright=imgwidthB cliptop=0 clipbottom=imgheightB/2 document.all.bgimageB.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.bgimageC.style.posLeft=0 document.all.bgimageC.style.posTop=imgheightA/2-imgheightC/2 clipleft=0 clipright=imgwidthC/2 cliptop=imgheightC/2 clipbottom=imgheightC document.all.bgimageC.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" document.all.bgimageD.style.posLeft=imgwidthA/2-imgwidthB/2 document.all.bgimageD.style.posTop=imgheightA/2-imgheightC/2 clipleft=imgwidthD/2 clipright=imgwidthD cliptop=imgheightD/2 clipbottom=imgheightD document.all.bgimageD.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" } if (document.layers) { document.bgimageA.document.write("<img src="+imgsrc+" width="+imgwidthA+" height="+imgheightA+">") document.bgimageA.document.close() document.bgimageB.document.write("<img src="+imgsrc+" width="+imgwidthB+" height="+imgheightB+">") document.bgimageB.document.close() document.bgimageC.document.write("<img src="+imgsrc+" width="+imgwidthC+" height="+imgheightC+">") document.bgimageC.document.close() document.bgimageD.document.write("<img src="+imgsrc+" width="+imgwidthD+" height="+imgheightD+">") document.bgimageD.document.close() document.bgimageA.left=0 document.bgimageA.top=0 document.bgimageA.clip.left=0 document.bgimageA.clip.right=imgwidthA/2 document.bgimageA.clip.top=0 document.bgimageA.clip.bottom=imgheightA/2 document.bgimageB.left=imgwidthA/2-imgwidthB/2 document.bgimageB.top=0 document.bgimageB.clip.left=imgwidthB/2 document.bgimageB.clip.right=imgwidthB document.bgimageB.clip.top=0 document.bgimageB.clip.bottom=imgheightB/2 document.bgimageC.left=0 document.bgimageC.top=imgheightA/2-imgheightC/2 document.bgimageC.clip.left=0 document.bgimageC.clip.right=imgwidthC/2 document.bgimageC.clip.top=imgheightC/2 document.bgimageC.clip.bottom=imgheightC document.bgimageD.left=imgwidthA/2-imgwidthB/2 document.bgimageD.top=imgheightA/2-imgheightC/2 document.bgimageD.clip.left=imgwidthD/2 document.bgimageD.clip.right=imgwidthD document.bgimageD.clip.top=imgheightD/2 document.bgimageD.clip.bottom=imgheightD } } function stretchimg() { imgwidthA+=x_step imgheightA+=y_step imgwidthB=2*screenwidth-imgwidthA imgheightB=imgheightA imgwidthC=imgwidthA imgheightC=2*screenheight-imgheightA imgwidthD=2*screenwidth-imgwidthA imgheightD=2*screenheight-imgheightA if (imgwidthA<=screenwidth*stretchstrength && imgheightA<=screenheight*stretchstrength) { newpos() i_loop++ var timer=setTimeout("stretchimg()",pause) } else { clearTimeout(timer) shrinkimg() } } function shrinkimg() { imgwidthA-=x_step imgheightA-=y_step imgwidthB=2*screenwidth-imgwidthA imgheightB=imgheightA imgwidthC=imgwidthA imgheightC=2*screenheight-imgheightA imgwidthD=2*screenwidth-imgwidthA imgheightD=2*screenheight-imgheightA if (imgwidthA>=screenwidth/stretchstrength && imgheightA>=screenheight/stretchstrength) { newpos() i_loop-- var timer=setTimeout("shrinkimg()",pause) } else { clearTimeout(timer) setnewsize() } } function setnewsize() { x_step=Math.floor(max_step*Math.random()) y_step=Math.floor(max_step*Math.random()) i_loop=0 stretchimg() } window.onresize=initiate </SCRIPT>

<body>انسخ هذا الكود في

نفسها<body>نسخ هذا الكود في داخل واصفة