Tutorial Membuat efek Hujan di HTML

TUTORIAL MEMBUAT EFEK HUJAN DI HTML TANPA GAMBAR ALIAS PAKE JAVA SCRIPT Dan CSS

Hai gan :).Kali ini gw bakal share tutorial buat efek salju di html dengan Java Script dan css bukan pake gif atau gambar gan :)

Ya..Mungkin bisa bermanfaat buat kalian yang ingin mempercantik Script HTML kalian atau mungkin blog atau project html kalian.

Ok langsung saja saya mulai tutorialnya gan :)

==================================================================================

<style>

.drop { position: absolute; width: 3;  filter: flipV(), flipH(); font-size: 40; color: blue }

</style>

<script language="javascript">

//Hujan/ effect- By Mr-CAPITAL capitallail.blogspot.co.id

//tutorial by me Ramadoni :)

snow = false;    // false-rain;   true-snow

snowsym = " * "  //These are the symbols for each

rainsym = " ' "  //You can put images here.

howmany = 10     //How many drops/snowflakes?

/**************Jangan hapus ini ***********/

if(snow){sym = snowsym; speed=1; angle=10; drops=howmany}

else{sym = rainsym; speed=50; drops=howmany; angle=6}

movex = -speed/angle; movey = speed; count = 0;

function moverain(){

for(move = 0; move < drops; move++){

xx[move]+=movex;  yy[move]+=mv[move];

hmm = Math.round(Math.random()*1);

if(xx[move] < 0){xx[move] = maxx+10;}

if(yy[move] > maxy){yy[move] = 10;}

drop[move].left = xx[move]

drop[move].top = yy[move]+document.body.scrollTop;

}setTimeout('moverain()','1')}

</script>

==================================================================================

1.copy Script ditadi dan pastekan ke bagian HEAD di Script HTML Kalian

==================================================================================

<script language="javascript">

drop = new Array(); xx = new Array(); yy = new Array(); mv = new Array()

ly = "document.all[\'"; st = "\'].style"

for(make = 0; make < drops; make++){

document.write('<div id="drop'+make+'" class=drop>'+sym+'</div>');

drop[make] = eval(ly+'drop'+make+st);

maxx = document.body.clientWidth-40

maxy = document.body.clientHeight-40

xx[make] = Math.random()*maxx;

yy[make] = -100-Math.random()*maxy;

drop[make].left = xx[make]

drop[make].top = yy[make]

mv[make] = (Math.random()*5)+speed/4;

drop[make].fontSize = (Math.random()*10)+20;

if(snow){col = 'white'}else{col = 'blue'}

drop[make].color = col;

}

window.onload=moverain

</script>

==================================================================================

2.Copy dan paste lagi script diatas di bagian end tag sebuah document alias di bagian </body>
3.Save As code as .html gan dah tau kan.
4.Silahkan diliat hasilnya

Hasilnya :)