30 Julai 2012

Efek Backround Bergerak


Demo di sini

Langkah pemasangan
Hanya perlu ke Design-->Page Element-->Add Gadget HML/Javascript

Paste kod ini didalamnya
<script type="text/javascript"> // <![CDATA[ var border=50; // how wide is each border var effects=3; // how many of the effect are on the page var speed=50; // how fast is the animation (lower is faster) var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6"); // above line lists colours for the groovy effect (can be as long or short as you like) /**************************** *Tutorial By Polskahackrew* * (c) 2008 mf2fm web-design * * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var swide, shigh; var h=new Array(); var v=new Array(); var op=1/(effects+1); window.onload=function() { if (document.getElementById) { var i, d, s, b; b=document.createElement("div"); s=b.style; s.position="absolute"; s.overflow="hidden"; s.zIndex="-1"; b.setAttribute("id", "bod"); i=document.body.style.backgroundColor; if (document.body.parentNode) { if (i) document.body.parentNode.style.backgroundColor=i; document.body.style.backgroundColor="transparent"; } document.body.appendChild(b); set_width(); set_scroll(); for (i=0; i<effects*10; i+=10) { d=document.createElement("div"); s=d.style; s.width="100%"; h[i]=Math.floor(Math.random()*shigh/2.5); h[i+1]=Math.floor(Math.random()*shigh/2.5); h[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3)); h[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3)); s.top=h[i]+"px"; s.bottom=h[i+1]+"px"; s.position="absolute"; s.borderColor=jazz(); s.borderStyle="solid"; s.borderWidth=border+"px 0px"; s.backgroundColor=jazz(); if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")"; else s.opacity=op; h[i+5]=s; b.appendChild(d); } for (i=0; i<effects*10; i+=10) { d=document.createElement("div"); s=d.style; s.height="100%"; v[i]=Math.floor(Math.random()*swide/2.5); v[i+1]=Math.floor(Math.random()*swide/2.5); v[i+2]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3)); v[i+3]=(Math.random()<0.5?-1:1)*(2+Math.floor(Math.random()*3)); s.left=v[i]+"px"; s.right=v[i+1]+"px"; s.position="absolute"; s.borderColor=jazz(); s.borderStyle="solid"; s.borderWidth="0px "+border+"px"; s.backgroundColor=jazz(); if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")"; else s.opacity=op; v[i+5]=s; b.appendChild(d); } groovy(); }} var old_jazz=false; function jazz() { var new_jazz; do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; } while ( new_jazz==old_jazz ); old_jazz=new_jazz; return (new_jazz); } function scat(no) { var yes; no=no*Math.abs(no); do { yes=2+Math.floor(Math.random()*3); } while ( no==yes ); return (yes); } function groovy() { setTimeout("groovy()", speed); var i; for (i=0; i<effects*10; i+=10) { h[i]+=h[i+2]; h[i+1]+=h[i+3]; if (h[i]+h[i+1]>shigh-border*2) { h[i+4]=h[i+2]; h[i+2]=-h[i+3]; h[i+3]=-h[i+4]; h[i+5].backgroundColor=jazz(); } if (h[i]<-border && Math.random()<1/border) { h[i+2]=scat(h[i+3]); if (h[i+1]>shigh) h[i+5].borderColor=jazz(); } else if (h[i]>shigh && Math.random()<1/border) { h[i+2]=-scat(h[i+3]); } if (h[i+1]<-border && Math.random()<1/border) { h[i+3]=scat(h[i+2]); if (h[i]>shigh) h[i+5].borderColor=jazz(); } else if (h[i+1]>shigh && Math.random()<1/border) { h[i+3]=-scat(h[i+2]); } h[i+5].top=h[i]+"px"; h[i+5].bottom=h[i+1]+"px"; } for (i=0; i<effects*10; i+=10) { v[i]+=v[i+2]; v[i+1]+=v[i+3]; if (v[i]+v[i+1]>swide-border*2) { v[i+4]=v[i+2]; v[i+2]=-v[i+3]; v[i+3]=-v[i+4]; v[i+5].backgroundColor=jazz(); } if (v[i]<-border && Math.random()<1/border) { v[i+2]=scat(v[i+3]); if (v[i+1]>swide) v[i+5].borderColor=jazz(); } else if (v[i]>swide && Math.random()<1/border) { v[i+2]=-scat(v[i+3]); } if (v[i+1]<-border && Math.random()<1/border) { v[i+3]=scat(v[i+2]); if (v[i]>swide) v[i+5].borderColor=jazz(); } else if (v[i+1]>swide && Math.random()<1/border) { v[i+3]=-scat(v[i+2]); } v[i+5].left=v[i]+"px"; v[i+5].right=v[i+1]+"px"; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth-18; shigh=self.innerHeight-18; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } var s=document.getElementById("bod").style; s.width=swide+"px"; s.height=shigh+"px"; } window.onscroll=set_scroll; function set_scroll() { var sleft, sdown; if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } var s=document.getElementById("bod").style; s.top=sdown+"px"; s.left=sleft+"px"; } // ]]> </script>

0 ulasan:

Catat Ulasan

Follow by Email