Bikin Background Bergerak

Gimana sih bikin background blog kita tuh bisa bergerak ??
Nah, disini saya akan kasih Tutorial Membuat Backround Bergerak Pada Blog. Iya kaya animasi gambar gif gitu dah !


Ni dia scriptnya:


<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)


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><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)


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>

Nah, sekarang tinggal anda coba sendiri deh !!

Artikel Terkait: