Senin, 05 Maret 2012

Cara Membuat Warna Background Bergerak Pada Blog

Oke sobat kali ini Blog saya akan memberikan Tutorial tentang Cara Membuat Warna Background Bergerak Pada Blog ( mirip-mirip seperti animasi gambar gif gitu )

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.Vicahya
Agen Bola online Agen Bola online

Tidak ada komentar:

Poskan Komentar

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank