Cara Membuat Animasi Hujan Dengan CSS-Javascript

Hai, jumpa lagi dengan saya, kali ini saya akan berbagi tutorial mengenai Cara Membuat Animasi Hujan Dengan CSS-Javascript, seperti apa cara membuatnya, simak langkah-langkah nya berikut ini.

Seperti biasa silahkan kalian siapkan dulu teks editornya, setelah itu ketikan kode HTML berikut.

<section class="rain"></section>

Kalo sudah, kita lanjutkan untuk kode CSS berikut ini.

html{height:100%;}
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000)  );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);

overflow:hidden;}


.drop {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
	width:1px;
	height:89px;
	position: absolute;
	bottom:200px;
	-webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
  
}

/* animate the drops*/
@-webkit-keyframes fall {
	to {margin-top:900px;}
}
@-moz-keyframes fall {
	to {margin-top:900px;}
}

Setelah itu, terakhir ketikan kode Javascript berikut untuk memberikan efek hujan.

// number of drops created.
var nbDrop = 858; 

// function to generate a random number range.
function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

// function to generate drops
function createRain() {

	for( i=1;i<nbDrop;i++) {
	var dropLeft = randRange(0,1600);
	var dropTop = randRange(-1000,1400);

	$('.rain').append('<div class="drop" id="drop'+i+'"></div>');
	$('#drop'+i).css('left',dropLeft);
	$('#drop'+i).css('top',dropTop);
	}

}
// Make it rain
createRain();

Kalo sudah semua diketikan, jangan lupa disimpan terlebih dahulu, kemudian jalankan di browser masing-masing, dan lihat hasilnya. Selesai’

Baik itu tadi tutorial mengenai Cara Membuat Animasi Hujan Dengan CSS-Javascript, semoga bermanfaat, amin.

Selamat mencoba.