Cara Membuat Warna Background Bergerak Pada Blog

Cara Membuat Warna Background Bergerak Pada Blog

Cara Membuat Warna Background Bergerak - Tutorial cara buat efek warna backgroud menarik.
Gimana sih Cara Membuat Background Bergerak Pada Blog?
Oke sobat kali ini Blog saya akan memberikan Tips dan Trick tentang Cara Membuat Warna Background Bergerak Pada Blog(mirip-mirip seperti animasi gambar gif gitu)

Untuk contoh Background Bergeraknya bisa sobat lihat disini
Bagaimana,menarik bukan..:)

Bila sobat tertarik dan ingin mencoba.cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element Html/javascript blog sobat..

Berikut Kodenya :

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

Save dan Selesai.
Nah Cukup Sekian Tutorial singkat dari saya sobat Cara Membuat Warna Background Bergerak Pada Blog,semoga bisa bermanfaat.Selamat mencoba sobat.: )


Salam hangat dan sahabat selalu dari saya.Ageboy

Ageboy Blog: http://ageboy.blogspot.com/2011/12/cara-membuat-warna-background-bergerak.html#ixzz1mPkYu8cf