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:

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

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

cara membuat efek hujan menggunakan jQuery

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.

 

WhatsApp chat