Siapa bilang multimedia tidak perlu coding? Justru coding akan membuat pekerjaanmu menjadi lebih ringan dan scalable. Dengan pendekatan scripting, kamu bisa menghasilkan animasi yang kompleks dan fleksibel hanya dengan beberapa baris kode, tanpa harus membuat ribuan frame secara manual. Mari kita lihat bagaimana kita bisa menciptakan efek hujan dinamis dan bandingkan metode frame-by-frame dengan teknik scripting.
Bayangkan suasana malam yang hujan, tetesan yang berubah menjadi percikan air, dan situs web Anda yang hidup dengan gerakan. Dengan coding, kamu bisa dengan mudah mengatur variasi, kecepatan, dan interaksi efek hujan sesuai kebutuhan, menjadikan proyek multimedia lebih efisien.
See the Pen Untitled by omayib (@omayib) on CodePen.
Struktur Dasar Hujan
Kita mulai dengan struktur HTML yang sederhana. Di sini, terdapat dua lapisan yang akan digunakan untuk menampung tetesan hujan. Kedua lapisan tersebut (baris depan dan baris belakang) membantu menciptakan efek kedalaman sehingga hujan tampak lebih natural.
<body>
<div class="rain front-row"></div>
<div class="rain back-row"></div>
</body>Elemen <div> dengan kelas rain front-row dan rain back-row merupakan “kanvas” tempat tetesan hujan akan dibuat secara dinamis oleh JavaScript.
Menghidupkan Efek Hujan
CSS berperan penting dalam mengatur tampilan, posisi, dan animasi dari efek hujan. Di sini, kita menetapkan tampilan full-screen, latar belakang gradasi gelap, dan animasi untuk tetesan hujan serta percikan (splat) yang muncul saat tetesan menyentuh “tanah”.
Menyiapkan Latar Belakang
Kita pastikan halaman terisi penuh dengan viewport dan memberikan latar belakang gradasi yang lembut, cocok untuk suasana hujan.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
overflow: hidden;
background: linear-gradient(to bottom, #202020, #111119);
}Menata Lapisan Hujan
Kedua lapisan hujan diatur agar menutupi seluruh layar. Lapisan belakang (back-row) diberikan posisi yang sedikit berbeda dan transparansi agar tampak berada di kejauhan.
.rain {
position: absolute;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.rain.back-row {
z-index: 1;
bottom: 60px;
opacity: 0.5;
}Animasi Tetesan, Batang, dan Percikan
Setiap tetesan hujan terdiri dari bagian yang jatuh (disebut “stem”) dan percikan (“splat”) saat mengenai permukaan. Animasi diatur dengan keyframes CSS.
Animasi ini membuat tetesan hujan mulai dari atas dan turun secara linear hingga mendekati dasar layar. Tetesan ini memiliki lebar 15px dan tinggi 120px. Dengan pointer-events: none, elemen ini tidak akan bereaksi terhadap klik atau interaksi mouse, sehingga tidak mengganggu pengalaman pengguna. Lalu mengulangi proses tersebut terus-menerus berdurasi 0.5 detik dengan kecepatan konstan (linear) yang diulang terus-menerus (infinite). Dengan demikian menciptakan efek hujan yang dinamis.
.drop {
position: absolute;
bottom: 100%;
width: 15px;
height: 120px;
pointer-events: none;
animation: drop 0.5s linear infinite;
}
@keyframes drop {
0% { transform: translateY(0vh); }
75% { transform: translateY(90vh); }
100% { transform: translateY(90vh); }
}
Dalam animasi berikutnya, ada dua bagian yang bekerja bersama untuk membuat efek hujan yang realistis.
- Stem
Bayangkan stem sebagai jejak tipis air yang jatuh. Pada awal animasi, batang tetesan ini tampak jelas (opacity 1) dan kemudian perlahan menghilang (opacity turun menjadi 0) sehingga seolah-olah jejak air itu memudar seiring tetesan mendekati tanah. - Splat
Percikan atau “splat” adalah efek yang muncul ketika tetesan air mengenai permukaan. Awalnya, percikan ini tidak terlihat karena skalanya (ukurannya) dimulai dari 0. Kemudian, hampir di akhir animasi, ukurannya membesar (scale naik) sehingga muncul pola percikan berupa garis putus-putus, lalu perlahan memudar hingga tidak terlihat lagi.
Secara sederhana, ketika tetesan jatuh, kamu melihat garis tipis (stem) yang perlahan menghilang, dan di titik terendah, muncul percikan air (splat) yang membesar dan kemudian menghilang, memberikan efek seolah-olah air tersebut menyebar saat menyentuh tanah.
.stem {
width: 1px;
height: 60%;
margin-left: 7px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
animation: stem 0.5s linear infinite;
}
@keyframes stem {
0% { opacity: 1; }
65% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0; }
}
.splat {
width: 15px;
height: 10px;
border-top: 2px dotted rgba(255, 255, 255, 0.5);
border-radius: 50%;
opacity: 1;
transform: scale(0);
animation: splat 0.5s linear infinite;
display: block;
}
@keyframes splat {
0% { opacity: 1; transform: scale(0); }
80% { opacity: 1; transform: scale(0); }
90% { opacity: 0.5; transform: scale(1); }
100% { opacity: 0; transform: scale(1.5); }
}
JavaScript untuk Menghasilkan Efek Hujan
Di sinilah keasyikan dinamis dimulai. Kode JavaScript akan membuat tetesan hujan secara acak dengan posisi, penundaan, dan durasi animasi yang bervariasi. Karena kita telah menghilangkan fungsi toggle, hujan akan dibuat satu kali saat halaman dimuat dengan efek splat selalu aktif.
Fungsi makeItRain
Fungsi ini bertugas sebagai berikut.
- Menghapus tetesan hujan yang sudah ada.
- Menghasilkan tetesan baru secara acak dengan properti yang bervariasi.
- Menambahkan tetesan ke lapisan depan dan belakang.
var makeItRain = function() {
// Kita mulai dengan menghapus tetesan yang sudah ada
$('.rain').empty();
var increment = 0;
var drops = "";
var backDrops = "";
while (increment < 100) {
// Menghasilkan angka acak untuk variasi
var randoHundo = Math.floor(Math.random() * 98) + 1;
var randoFiver = Math.floor(Math.random() * 4) + 2; // angka acak antara 2 dan 5
increment += randoFiver;
// Membuat tetesan untuk lapisan depan
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;">' +
'<div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div>' +
'<div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div>' +
'</div>';
// Membuat tetesan yang sesuai untuk lapisan belakang
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;">' +
'<div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div>' +
'<div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div>' +
'</div>';
}
$('.rain.front-row').append(drops);
$('.rain.back-row').append(backDrops);
}
// Inisialisasi efek hujan saat halaman dimuat
makeItRain();
Fungsi ini menggunakan angka acak agar setiap tetesan memiliki posisi dan waktu animasi yang berbeda. Hasilnya adalah efek hujan yang terasa alami dan dinamis karena setiap tetesan memiliki perilaku yang unik.
Selamat mencoba, dan semoga inspirasi hujan digital ini menambah keindahan pada proyek Anda! Happy coding!
Leave a Reply