Efek Backround Bergerak
Demo di sini
Langkah pemasangan
Hanya perlu ke Design-->Page Element-->Add Gadget HML/Javascript
Paste kod ini didalamnya
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>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.