6/12/11

Tutorial cara buat efek hujan pada blog


Tutorial ni buat blog aku basah dan hampir banjir...hehehe

Tengok saja live demo pada blog ni..habis basahkan..hahaha




Cara buat efek hujan pada blog senang saja...sama macam pasang widget lain

Mula2 pergi ke desbot---desaign---ada gajet---html/javascript...

Copy code di bawah kemudian save....senangkan

<script type="text/javascript">
// <![CDATA[
var speed=33; // makin kecil makin laju
var drops=100; // jumlah hujan
var colour="#999"; // warna hujan
/***************************\
*   Hujan di tengah hari  *
* (c) 2011 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* tutorial By P0L5K4H4CKR3W *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var swide, shigh, boddie, ifs;
window.onload=function() { if (document.getElementById) {
  var r1, r2;
  ifs=is_fixed_supported();
  boddie=document.createElement("div");
  if (ifs) boddie.style.position="fixed";
  else boddie.style.position="absolute";
  boddie.style.top="0px";
  boddie.style.left="0px";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<drops; i++) {
    flks[i]=createDiv(16, 2, "transparent");
    r1=createDiv(6, 2, colour);
    r1.style.top="10px";
    r1.style.left="0px";
    flks[i].appendChild(r1);
    r2=createDiv(10, 2, colour);
    r2.style.top="0px";
    r2.style.left="0px";
    if (navigator.appName=="Microsoft Internet Explorer") r2.style.filter="alpha(opacity=25)";
    else r2.style.opacity=0.25;
    flks[i].appendChild(r2);
    flkx[i]=2*Math.floor(Math.random()*swide/2);
    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";
    boddie.appendChild(flks[i]);
  }
  setInterval("cats_and_dogs()", speed);
}}

function is_fixed_supported() {
  var container=document.body;
  if (document.createElement && container && container.appendChild && container.removeChild) {
    var el=document.createElement("div");
    if (!el.getBoundingClientRect) return false;
    el.innerHTML="x";
    el.style.cssText="position:fixed;top:100px;";
    container.appendChild(el);
    var originalHeight=container.style.height, originalScrollTop=container.scrollTop;
    container.style.height="3000px";
    container.scrollTop = 500;
    var elementTop=el.getBoundingClientRect().top;
    container.style.height = originalHeight;
    var isSupported=(elementTop===100);
    container.removeChild(el);
    container.scrollTop=originalScrollTop;
    return isSupported;
  }
  return false;
}

function createDiv(height, width, colour) {
  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-=2;
}

window.onscroll=set_scroll;
function set_scroll() { if (!ifs) {
  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;
  }
  boddie.style.top=sdown+"px";
  boddie.style.left=sleft+"px";
}}

function cats_and_dogs(c) {
  var i, x, o=0;
  for (i=0; i<drops; i++) {
    flky[i]+=fldy[i];
    if (flky[i]>=shigh-16) {
      flky[i]=-16;
      fldy[i]=2+Math.floor(Math.random()*4);
      flkx[i]=2*Math.floor(Math.random()*swide/2);
      flks[i].style.left=flkx[i]+"px";
    }
    flks[i].style.top=flky[i]+"px";
  }
}
// ]]>
</script>




Sekian

9 ulasan:

Ageboy berkata...

kerennya tutorialnya..mantap ni...

Polskahackrew berkata...

@Ageboy
cuba la pasang bro..('',)

Aqmil Lambung berkata...

speed hujan turun tu boleh dilajukan lagi x?? nampak macam page melekat je... huhuhu..

Polskahackrew berkata...

@Aqmil Lambung
hujan tu slow sbb lagging bro..banyak sgt widget..sbb tu jadi slow.. sy da alter speed jadik paling laju pun dia sangkut..psl blog ni da banyak sgt widget..kalau blog awak x banyak widget ujan tu laju..('',)

Aqmil Lambung berkata...

tapi yang slow tu aku tengok live demo kat page kau... dah try pasang macam hujan betul..


Blog Bukan Sekadar Tulisan | by Aqmil Lambung

Polskahackrew berkata...

@Aqmil Lambung

live demo ni memang sangkut2 bro..tp sebab aku ada kacau setting coding untuk buat live demo ni bro..('',)

Gabby berkata...

nice,.. q coba d blogq yasob,.. :)

Gabby berkata...

nice,.. q coba d blogq yasob,.. :)

Polskahackrew berkata...

@Gabbycoba jgn x coba bro.. hehe..

entri ja

Related Posts Plugin for WordPress, Blogger...