چند کد برای زیبا باز شدن صفحه وب

حتما در تلوزیون یا در پاور پوینت ها دیدین که برای باز شدن یه صفحه یک افکت میذارن که به زیبا سازی کمک می کنه.

شما با این کد ها می تونین این افکت ها رو در وب خودتون ایجاد کنید.

برای آزمایش کد های به این آدرس بروید.

شماره 1

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:blue; background-color:blue; border:0.1px solid blue; z-index:10; } --> </style> <div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3" class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div> <script language="JavaScript1.2"> /* Left-Right Stripy Curtain Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var speed=20 var temp=new Array() var temp2=new Array() if (ns4){ for (i=1;i<=8;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth temp[i].height=window.innerHeight/8 temp2[i].top=(i-1)*temp[i].height } } else if (ie4||ns6){ var clipright=ns6?window.innerWidth:document.body.clientWidth clipleft=0 for (i=1;i<=8;i++){ temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style") temp[i].width=ns6?window.innerWidth-15:document.body.clientWidth temp[i].height=ns6?window.innerHeight/8:document.body.offsetHeight/8 temp[i].top=(i-1)*parseInt(temp[i].height) } } function openit(){ window.scrollTo(0,0) if (ns4){ for (i=1;i<=8;i=i+2) temp[i].right-=speed for (i=2;i<=8;i=i+2) temp[i].left+=speed if (temp[2].left>window.innerWidth) clearInterval(stopit) } else if (ie4||ns6){ clipright-=speed for (i=1;i<=8;i=i+2){ temp[i].clip="rect(0 "+clipright+" auto 0)" } clipleft+=speed for (i=2;i<=8;i=i+2){ temp[i].clip="rect(0 auto auto "+clipleft+")" } if (clipright<=0){ if (ns6){ for (i=1;i<=8;i++) temp[i].display="none" } clearInterval(stopit) } } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

شماره 2

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:green; background-color:green; border:0.1px solid green; z-index:10; } --> </style> <div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3" class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div> <script language="JavaScript1.2"> /* Top-Down Curtain Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var speed=20 var temp=new Array() var temp2=new Array() if (ns4){ for (i=1;i<=8;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth/8-0.3 temp[i].height=window.innerHeight temp2[i].left=(i-1)*temp[i].width } } else if (ie4||ns6){ var clipbottom=ns6?window.innerHeight:document.body.offsetHeight cliptop=0 for (i=1;i<=8;i++){ temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style") temp[i].width=ns6?window.innerWidth/8-2:document.body.clientWidth/8 temp[i].height=ns6?window.innerHeight:document.body.offsetHeight temp[i].left=(i-1)*parseInt(temp[i].width) } } function openit(){ window.scrollTo(0,0) if (ns4){ for (i=1;i<=8;i=i+2) temp[i].bottom-=speed for (i=2;i<=8;i=i+2) temp[i].top+=speed if (temp[2].top>window.innerHeight) clearInterval(stopit) } else if (ie4||ns6){ clipbottom-=speed for (i=1;i<=8;i=i+2){ temp[i].clip="rect(0 auto "+clipbottom+" 0)" } cliptop+=speed for (i=2;i<=8;i=i+2){ temp[i].clip="rect("+cliptop+" auto auto auto)" } if (clipbottom<=0){ if (ns6){ for (i=1;i<=8;i++) temp[i].display="none" } clearInterval(stopit) } } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

شماره 3

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:green; background-color:green; border:0.1px solid green; z-index:10; } --> </style> <div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3" class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div> <script language="JavaScript1.2"> /* Top-Down Curtain Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var speed=20 var temp=new Array() var temp2=new Array() if (ns4){ for (i=1;i<=8;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth/8-0.3 temp[i].height=window.innerHeight temp2[i].left=(i-1)*temp[i].width } } else if (ie4||ns6){ var clipbottom=ns6?window.innerHeight:document.body.offsetHeight cliptop=0 for (i=1;i<=8;i++){ temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style") temp[i].width=ns6?window.innerWidth/8-2:document.body.clientWidth/8 temp[i].height=ns6?window.innerHeight:document.body.offsetHeight temp[i].left=(i-1)*parseInt(temp[i].width) } } function openit(){ window.scrollTo(0,0) if (ns4){ for (i=1;i<=8;i=i+2) temp[i].bottom-=speed for (i=2;i<=8;i=i+2) temp[i].top+=speed if (temp[2].top>window.innerHeight) clearInterval(stopit) } else if (ie4||ns6){ clipbottom-=speed for (i=1;i<=8;i=i+2){ temp[i].clip="rect(0 auto "+clipbottom+" 0)" } cliptop+=speed for (i=2;i<=8;i=i+2){ temp[i].clip="rect("+cliptop+" auto auto auto)" } if (clipbottom<=0){ if (ns6){ for (i=1;i<=8;i++) temp[i].display="none" } clearInterval(stopit) } } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

شماره 4

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:yellow; background-color:yellow; border:0.1px solid yellow; z-index:10; } --> </style> <div id="i1" class="intro"></div><div id="i2" class="intro"></div> <script language="JavaScript1.2"> /* Top-Down Curtain Script- By Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, and TOS, visit http://www.dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var speed=20 var temp=new Array() var temp2=new Array() if (ns4){ for (i=1;i<=2;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth temp[i].height=window.innerHeight/2 temp2[i].top=(i-1)*temp[i].height } } else if (ie4||ns6){ var clipbottom=ns6?parseInt(window.innerHeight)/2:document.body.offsetHeight/2 cliptop=0 for (i=1;i<=2;i++){ temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style") temp[i].width=ns6?window.innerWidth-15:document.body.clientWidth temp[i].height=ns6?window.innerHeight/2:document.body.offsetHeight/2 temp[i].top=(i-1)*parseInt(temp[i].height) } } function openit(){ window.scrollTo(0,0) if (ns4){ temp[1].bottom-=speed temp[2].top+=speed if (temp[1].bottom<=0) clearInterval(stopit) } else if (ie4||ns6){ clipbottom-=speed temp[1].clip="rect(0 auto "+clipbottom+" 0)" cliptop+=speed temp[2].clip="rect("+cliptop+" auto auto auto)" if (clipbottom<=-5){ clearInterval(stopit) if (ns6){ temp[1].display="none" temp[2].display="none" } } } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

شماره 5

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:red; background-color:red; border:0.1px solid red; z-index:9; } --> </style> <div id="i1" class="intro"></div><div id="i2" class="intro"></div> <script language="JavaScript1.2"> /* Left-Right Curtain Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 var speed=20 var temp=new Array() var temp2=new Array() if (ns4){ for (i=1;i<=2;i++){ temp[i]=eval("document.i"+i+".clip") temp2[i]=eval("document.i"+i) temp[i].width=window.innerWidth/2 temp[i].height=window.innerHeight temp2[i].left=(i-1)*temp[i].width } } else if (ie4||ns6){ var clipright=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2,clipleft=0 for (i=1;i<=2;i++){ temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style") temp[i].width=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2 temp[i].height=ns6?window.innerHeight-1: document.body.offsetHeight temp[i].left=(i-1)*parseInt(temp[i].width) } } function openit(){ window.scrollTo(0,0) if (ns4){ temp[1].right-=speed temp[2].left+=speed if (temp[2].left>window.innerWidth/2) clearInterval(stopit) } else if (ie4||ns6){ clipright-=speed temp[1].clip="rect(0 "+clipright+" auto 0)" clipleft+=speed temp[2].clip="rect(0 auto auto "+clipleft+")" if (clipright<=0){ clearInterval(stopit) if (ns6){ temp[1].display="none" temp[2].display="none" } } } } function gogo(){ stopit=setInterval("openit()",100) } gogo() </script>

شماره 6

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:white; background-color:white; border:0.1px solid white; z-index:8; } --> </style> <div id="i1" class="intro"></div> <script language="JavaScript1.2"> /* Boxing In Script-© Dynamic Drive (www.dynamicdrive.com) For source code, installation instructions, 100's DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 //change speed here var speed=5 if (ns4){ var reference=window.innerWidth/window.innerHeight var temp=eval("document.i1.clip") temp.left=temp.top=0 temp.right=window.innerWidth temp.bottom=window.innerHeight } else if (ie4||ns6){ var reference=ns6?parseInt(window.innerWidth)/window.innerHeight: document.body.clientWidth/document.body.clientHeight var rightclip,leftclip,topclip,bottomclip var temp=ns6?document.getElementById("i1").style:document.all.i1.style topclip=leftclip=0 rightclip=temp.width=ns6?window.innerWidth*0.98:document.body.clientWidth bottomclip=temp.height=ns6?window.innerHeight-2:document.body.clientHeight } function doit(){ window.scrollTo(0,0) if (ns4){ if (temp.left>window.innerWidth/2) clearInterval(stopit) temp.left+=reference*speed temp.top+=speed temp.right-=reference*speed temp.bottom-=speed } else if (ie4||ns6){ halfofbrowser=ns6?parseInt(window.innerWidth/2):document.body.clientWidth/2 if (leftclip>halfofbrowser){ clearInterval(stopit) temp.display="none" } temp.clip="rect( "+topclip+" "+rightclip+" "+bottomclip+" "+leftclip+")" leftclip+=reference*speed topclip+=speed rightclip-=reference*speed bottomclip-=speed } } stopit=setInterval("doit()",100) </script>

شماره 7

<style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:green; background-color:green; border:0.1px solid green; z-index:10; } --> </style> <div id="p1" class="intro"></div> <div id="p2" class="intro"></div> <div id="p3" class="intro"></div> <div id="p4" class="intro"></div> <div id="p5" class="intro"></div> <div id="p6" class="intro"></div> <div id="p7" class="intro"></div> <div id="p8" class="intro"></div> <div id="p9" class="intro"></div> <div id="p10" class="intro"></div> <div id="p11" class="intro"></div> <div id="p12" class="intro"></div> <div id="p13" class="intro"></div> <div id="p14" class="intro"></div> <div id="p15" class="intro"></div> <div id="p16" class="intro"></div> <div id="p17" class="intro"></div> <div id="p18" class="intro"></div> <div id="p19" class="intro"></div> <div id="p20" class="intro"></div> <div id="p21" class="intro"></div> <div id="p22" class="intro"></div> <div id="p23" class="intro"></div> <div id="p24" class="intro"></div> <div id="p25" class="intro"></div> <script> /* Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com) For full source code, 100's more free DHTML scripts, and TOS, visit http://www.dynamicdrive.com */ var espeed=300 var counter=1 var temp=new Array() var temp2=new Array() var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 ////////Code for Netscape NS 4+//// if (ns4){ for (i=1;i<=25;i++){ temp[i]=eval("document.p"+i+".clip") temp2[i]=eval("document.p"+i) temp[i].width=window.innerWidth/5 temp[i].height=window.innerHeight/5 } for (i=1;i<=5;i++) temp2[i].left=(i-1)*temp[i].width for (i=6;i<=10;i++){ temp2[i].left=(i-6)*temp[i].width temp2[i].top=temp[i].height } for (i=11;i<=15;i++){ temp2[i].left=(i-11)*temp[i].width temp2[i].top=2*temp[i].height } for (i=16;i<=20;i++){ temp2[i].left=(i-16)*temp[i].width temp2[i].top=3*temp[i].height } for (i=21;i<=25;i++){ temp2[i].left=(i-21)*temp[i].width temp2[i].top=4*temp[i].height } } function erasecontainerns(){ window.scrollTo(0,0) var whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 if (temp2[whichcontainer].visibility!="hide") temp2[whichcontainer].visibility="hide" else{ while (temp2[whichcontainer].visibility=="hide"){ whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 } temp2[whichcontainer].visibility="hide" } if (counter==25) clearInterval(beginerase) counter++ espeed-=10 } ////////End code for NS 4+//////// ///////////Code for IE 4+ and NS6///////// if (ie4||ns6){ var containerwidth=ns6?parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5) var containerheight=ns6?parseInt(window.innerHeight)/5-2 : parseInt(document.body.offsetHeight/5) for (i=1;i<=25;i++){ temp[i]=ns6?document.getElementById("p"+i).style : eval("document.all.p"+i+".style") temp[i].width=containerwidth temp[i].height=containerheight } for (i=1;i<=5;i++) temp[i].left=(i-1)*containerwidth for (i=6;i<=10;i++){ temp[i].left=(i-6)*containerwidth temp[i].top=containerheight } for (i=11;i<=15;i++){ temp[i].left=(i-11)*containerwidth temp[i].top=2*containerheight } for (i=16;i<=20;i++){ temp[i].left=(i-16)*containerwidth temp[i].top=3*containerheight } for (i=21;i<=25;i++){ temp[i].left=(i-21)*containerwidth temp[i].top=4*containerheight } } function erasecontainerie(){ window.scrollTo(0,0) var whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 if (temp[whichcontainer].visibility!="hidden") temp[whichcontainer].visibility="hidden" else{ while (temp[whichcontainer].visibility=="hidden"){ whichcontainer=Math.round(Math.random()*25) if (whichcontainer==0) whichcontainer=1 } temp[whichcontainer].visibility="hidden" } if (counter==25){ clearInterval(beginerase) if (ns6){ for (i=1;i<26;i++) temp[i].display="none" } } counter++ espeed-=10 } /////////End IE 4+ code//////// if (ns4) beginerase=setInterval("erasecontainerns()",espeed) else if (ie4||ns6){ beginerase=setInterval("erasecontainerie()",espeed) } </script>