25/10/11

Tutorial cara buat small dot falling efek pada blog



Efek ni macam bubble efek tapi bubble efek ke atas..yang ni kebawah

Live demo macam yang anda nampak sekarang ni...

Cara pasang efek ni..macam biasa...desbot---desaign---ada gadget---html / javascript

copy code di bawah kemudian paste..lepas tu save...selesai...


<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#639"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts

/***************************\
*     Let It Snow Effect    *
*(c) 2004-6 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* tutorial by polskahackrew *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh;
window.onload=function() { if (document.getElementById) {
  var b, s;
  b=document.createElement("div");
  s=b.style;
  s.position="absolute";
  b.setAttribute("id", "bod");
  document.body.appendChild(b);
  set_scroll();
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    b.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (typeof(self.innerHeight)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
  swide-=3;
  if (slush) {
    if (swide/3>slss.length) for (var i=slss.length; i<swide/3; i++) {
      slss[i]=createDiv(3, 3);
      slss[i].style.left=3*i+"px";
      document.getElementById("bod").appendChild(slss[i]);
      slsh[i]=3;
    }
    for (var i=0; i<swide/3; i++) slss[i].style.top=shigh-slsh[i]+"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";
}

function let_it_snow(c) {
  var i, x, o=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
    x=flkx[i]/3;
    if (slush) o+=slsh[x];
    if (flky[i]>=shigh-(slush?slsh[x]:0)) {
      if (slush) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
      }
      flky[i]=0;
      fldy[i]=2+Math.floor(Math.random()*4);
      flkx[i]=3*Math.floor(Math.random()*swide/3);
      flks[i].style.left=flkx[i]+"px";
    }
    flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) {
    for (i=0; i<swide/3; i++) if (slsh[i]>1) slsh[i]--;
    set_width();
  }
}
// ]]>
</script>


untuk tukar warna efek anda boleh tukar code warna yang kaler kuning tu...
sekian

Tiada ulasan:

entri ja

Related Posts Plugin for WordPress, Blogger...