» » Animasi Warna Background

Animasi Warna Background

    Label: Blogspot

Bikin blog tampil unik dengan memasang animasi warna background yang colorful kaya di film avatar penuh dengan warna - warni. Animasi warna pada background akan bergerak secara vertikal dan horizontal dengan diikuti perubahan warna. Gimana Moz's Blogger kerenkan ???

Animasi warna background ini menggunakan javascript jadi tidak akan memberatkan waktu loading blog. Script ini dapat disesuaikan mulai dari warna yang dapat disesuaikan dengan selera sobat  blogger sampai kecepatan transformasi warna. Soooo... buat yang pengen blognya penuh dengan warna-warni monggo disimak tutorialnya...

Untuk contoh dapat dilihat pada background postingan artikel ini jika tidak terlihat silakan refresh halaman ini. Animasi akan terlihat sebagian karena script yang digunakan berada dalam postingan artikel tapi jika dipasang di dalam kode blog animasi warna background akan sesuai dengan ukuran latar.

Buat yang suka copy-paste artikel mohon supportnya dengan meng-klik iklan / sponsor yang ada di blog MonozCore. Support sobat akan sangat membantu pengembangan blog ini, Terima Kasih...

Cara Pemasangan :
  • Login ke blog sobat.
  • Klik "Design" kemudian klik "Edit HTML".
  • Cari kode "<Body>" kemudian taruh kode script berikut ini setelah kode "<Body>"

    <script type="text/javascript">
    // <![CDATA[
    var border=50;
    var effects=3;
    var speed=50;
    var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");

    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>

    Keterangan :
    - var border=50; // Tebal blok warna.
    - var effects=3; // Jumlah efek warna.
    - var speed=50; // Kecepatan animasi (makin kecil semakin cepat).
    - var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
    // Array warna yang digunakan (warna dapat disesuaikan bisa ditambah atau dikurangi). Kode warna menggunakan kode hex warna HTML untuk mengetahui kode hex warna lainnya dapat dilihat di postingan artikel kode warna HTML. Untuk mengganti warna gunakan 3 digit kode depan hex warna, seperti "#9cf", "#c9f" atau "#fc9".

  • Klik "Save" dan lihat hasilnya...
Mohon supportnya ya biar kreasinya tambah keren dan bermanfaat. Buat yang masih bingung seputar pemasangan widget ini silakan tanyakan melalui kotak komentar...

.:Semoga Bermanfaat:.
Animasi Warna Background 4.5 5 Unknown Bikin blog tampil unik dengan memasang animasi warna background yang colorful kaya di film avatar penuh dengan warna - warni. Animasi warna ...


Label:

Tidak ada komentar:

Posting Komentar