Membuat Effek hujan

Efek hujan lagi? Kalau diingat-ingat aku udah banyak sekali membuat efek hujan, mulai dari salju, bunga sakura, duit, dan terakhir kayaknya hujan bulu. Sebenarnya efek tersebut sama, hanya gambarnya saja yang berbeda, kali ini aku mau ngebocorin trik untuk membuat hujan sesuai keinginan kamu.
Pada dasarnya, Trik ini menggunakan Javascript.
Copy kode Javascript ini dan paste ke "Notepad"
            /******************************************
            * Snow Effect Script- By Yudhaime. (http://blog.yudhaime.co.cc)
            * Visit Yudhaime's Blog! (http://blog.yudhaime.co.cc/) for full source code
            * Last updated Nov 9th, 05 by DD. This notice must stay intact for use
            ******************************************/
             
              //Configure below to change URL path to the snow image
              var snowsrc="http://mig33.us/images/emoticons/valentines/Big_red_heart_16.gif";
              // Configure below to change number of snow to render
              var no = 10;
              // Configure whether snow should disappear after x seconds (0=never):
              var hidesnowtime = "0";
              // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
              var snowdistance = "pageheight";
           
            ///////////Stop Config//////////////////////////////////
           
              var ie4up = (document.all) ? 1 : 0;
              var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
           
                function iecompattest(){
                return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
                }
           
              var dx, xp, yp;    // coordinate and position variables
              var am, stx, sty;  // amplitude and step variables
              var i, doc_width = 800, doc_height = 600;
             
              if (ns6up) {
                doc_width = self.innerWidth;
                doc_height = self.innerHeight;
              } else if (ie4up) {
                doc_width = iecompattest().clientWidth;
                doc_height = iecompattest().clientHeight;
              }
           
              dx = new Array();
              xp = new Array();
              yp = new Array();
              am = new Array();
              stx = new Array();
              sty = new Array();
              snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
              for (i = 0; i < no; ++ i) { 
                dx[i] = 0;                        // set coordinate variables
                xp[i] = Math.random()*(doc_width-50);  // set position variables
                yp[i] = Math.random()*doc_height;
                am[i] = Math.random()*20;         // set amplitude variables
                stx[i] = 0.02 + Math.random()/10; // set step variables
                sty[i] = 0.7 + Math.random();     // set step variables
                    if (ie4up||ns6up) {
                  if (i == 0) {
                    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://wpplugins.info\"><img src="+snowsrc+" border=\"0\"><\/a><\/div>");
                  } else {
                    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src="+snowsrc+" border=\"0\"><\/div>");
                  }
                }
              }
           
              function snowIE_NS6() {  // IE and NS6 main animation function
                doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
                    doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
                for (i = 0; i < no; ++ i) {  // iterate for every dot
                  yp[i] += sty[i];
                  if (yp[i] > doc_height-50) {
                    xp[i] = Math.random()*(doc_width-am[i]-30);
                    yp[i] = 0;
                    stx[i] = 0.02 + Math.random()/10;
                    sty[i] = 0.7 + Math.random();
                  }
                  dx[i] += stx[i];
                  document.getElementById("dot"+i).style.top=yp[i]+"px";
                  document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
                }
                snowtimer=setTimeout("snowIE_NS6()", 10);
              }
           
                function hidesnow(){
                    if (window.snowtimer) clearTimeout(snowtimer)
                    for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
                }
                   
           
            if (ie4up||ns6up){
                snowIE_NS6();
                    if (hidesnowtime>0)
                    setTimeout("hidesnow()", hidesnowtime*1000)
                    }
Kode berwarna biru adalah alamat gambar untuk hujan, bisa diganti sesuai keinginanmu kok!
Simpan kode tadi dengan format .js
Upload file.js tadi ke web/filehosting kamu (disarankan Google Code)
Baca: "Upload javascript"
Untuk memasangnya di Blog kode HTMLnya sebagai berikut:

<script src="http://alamat/file.js" type="text/javascript"/>

http://alamat/file.js ganti dengan alamat dimana kamu menyimpan javascriptnya
Kode ini bisa dipaste diatas </head> atau bisa juga melalui penambahan widget.
Coba lihat hasilnya! Keren kan?

Ditunggu komentarnya lho!

loading..