Cara Membuat Efek Hujan Menggunakan jQuery

Untuk kali ini kita akan coba cara membuat efek hujan menggunakan jQuery, dimana tidak hanya menggunakan jquery disini kita membutuhkan juga animation-animation yang akan kita buat untuk membuat sebuah tampilan hujannya, seperti apa simak terus ya teman-teman.

Jadi untuk membuat sebuah tampilan hujan kita akan menggunakan sebuah webkit dan CSS yang lain, efek hujan ini saya dapatkan dari chanel youtubenya Sylvain Sauerel. Langsung saja ya teman-teman kita jelaskan sambil melihat kodenya, pertama untuk cara membuat efek hujan menggunakan jQuery adalah kita buat efek css nya terlebih dahulu seperti ini:

html {height: 100%; width: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: #FFFFFF;
	    width: 1px;
	    height: 89px;
	    position: absolute;
	    bottom: 200px;
	    -webkit-animation: fall .63s linear infinite;
	    -moz-animation: fall .63s linear infinite;
	   }
	   
	   @-webkit-keyframes fall { to {margin-top: 900px;}}
	   @-moz-keyframes fall { to {margin-top: 900px;}}

html {height: 100%; width: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: #FFFFFF;

width: 1px;

height: 89px;

position: absolute;

bottom: 200px;

-webkit-animation: fall .63s linear infinite;

-moz-animation: fall .63s linear infinite;

}

@-webkit-keyframes fall { to {margin-top: 900px;}}

@-moz-keyframes fall { to {margin-top: 900px;}}

Seperti yang teman-teman lihat tidak seperti biasanya dimana tag HTML kita style juga dengan tinggi dan lebar 100%, karena disini saya mengguankan gradient jika tidak kita atur maka tampilannya akan seperti garis-garis, jika tidak percaya bisa di coba.

Selanjutnya body juga kita style untuk membuat sebuah background gelap seperti mendung hujan, dengan sebuah background radient seperti di atas.

dan drop ini adalah sebuah tampilan hujannya dimana nantinya body itu akan menjalankan sebuah function dimana function itu akan membuat sebuah tag baru yang berisikan efek-efek dari hujan tersebut, seperti apa silahkan lihat disini

<body onload="createRain()">
 <section id="rain" class="rain"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
   var nbDrop = 800;
   
   function randRange(maxNum, minNum) {
    return (Math.floor(Math.random(10) * (maxNum - minNum + 1)) + minNum);
   }
   
   function createRain() {
    for (i = 0; i < nbDrop; i++) {
     
     var dropLeft = randRange(0, 3000);
     var dropTop = randRange(-1000, 1000);
     $('.rain').append('<div class="drop" id="drop'+ i +'"></div>');
     $('#drop' + i).css('left', dropLeft);
     $('#drop' + i).css('top', dropTop); 
    }
   }
  </script>

var nbDrop = 800;

function randRange(maxNum, minNum) {

return (Math.floor(Math.random(10) * (maxNum - minNum + 1)) + minNum);

}

function createRain() {

for (i = 0; i < nbDrop; i++) {

var dropLeft = randRange(0, 3000);

var dropTop = randRange(-1000, 1000);

$('.rain').append('<div class="drop" id="drop'+ i +'"></div>');

$('#drop' + i).css('left', dropLeft);

$('#drop' + i).css('top', dropTop);

}

</script>

Seperti yang saya tulis di atas ya, jadi createRain sebagai function akan membuat sebuah div class drop yang banyak dimana nilai dari posisinya pun berbeda-beda sekarang kita lihat hasilnya ya

Mungkin jika kita lihat disini efeknya tidak akan terlihat ya, maka dari itu teman-teman silahkan coba sendiri ya, dan saya rasa cukup sampai disini belajar kita tentang cara membuat efek hujan menggunakan jQuery semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Facebook DUMET School

Categories