25/10/11

Tutorial cara buat background warna bergerak yang menarik


Tutorial cara buat efek warna backgroud menarik by Blogger Blog Tutorial

Efek ni memang menarik tertarik dan memang da bomb...tapi oleh sebab aku ada setkan kaler pada main wrapper aku efek ni x berapa menyerlah tapi tetap daa bomb

live demo anda boleh tengok sendiri dalam entri ni...apa macam da bomb?

Cara pasang widget ni pun senang..mula2 pergi ke desbot--desaign--ada gadjet--html / javascript...kemudian copy dan paste code di bawah lepas tu save setel...

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


Tulisan yang kaler pelik tu adalah code warna untuk efek tu... jadi pandai2 la anda code kaler warna tu mengikut suka suka hati anda...sekian terima kaseh...

9 ulasan:

Cik Kasih berkata...

yg ni menarik la..

Polskahackrew berkata...

memang menarik tertarik dan memang da bomb..thanks singgah..('',)

Aqmil Lambung berkata...

bro camne nak kasi bahagian posting jadi transparent...

aku nak pakai background colour ni kalau bahagian posting transparent baru lawa mcm bro punye..



Blog Bukan Sekadar Tulisan | by Aqmil Lambung

Polskahackrew berkata...

@Aqmil Lambung
dah terai pasang blom..?..kalau background putih memang ngam ngan bgraund ni..kalo x blh cuba buang dl efek ular nokia tu..('',)

Aqmil Lambung berkata...

dah pasang.... tapi colour tu duk tepi kiri kanan je.. try r tengok




Blog Bukan Sekadar Tulisan | by Aqmil Lambung

Polskahackrew berkata...

@Aqmil Lambung
awak cari code ni

$(content.background.color.selector) {
background-color: $(content.background.color);
}


bila dah jumpa delete code tu kemudian preview..kalau ok save..boleh atau tidak..nanti bagitau..k..
terima kasih bagi feedback

Aqmil Lambung berkata...

dah jadi....





Blog Bukan Sekadar Tulisan | by Aqmil Lambung

Polskahackrew berkata...

@Aqmil Lambung
yeah..berjaya jg bro..nice..('',)

nor fadhilah berkata...

Terima kaseh ye :)

entri ja

Related Posts Plugin for WordPress, Blogger...