Part 5: Cara Menambahkan Animasi Sederhana pada Web Undangan Pernikahan Online
Pada Part 4, kita sudah menambahkan tombol RSVP interaktif serta Google Maps lokasi acara. Kali ini di Part 5, kita akan membuat undangan lebih hidup dengan animasi sederhana menggunakan CSS dan JavaScript.
Apa yang Akan Dibuat?
Kita akan menambahkan:
- Efek fade-in pada halaman saat pertama kali dibuka.
- Animasi foto pasangan dengan efek zoom in.
- Efek hover pada tombol RSVP agar terasa interaktif.
- Animasi judul halaman turun dari atas.
Langkah 1: Efek Fade-in pada Halaman
Tambahkan CSS berikut di dalam tag <style>:
/* Efek Fade-in */
body {
opacity: 0;
transition: opacity 1.5s ease-in;
}
body.fade-in {
opacity: 1;
}
Lalu tambahkan script JavaScript sebelum </body>:
<script>
window.addEventListener("load", function() {
document.body.classList.add("fade-in");
});
</script>
Langkah 2: Animasi Foto Pasangan
Tambahkan CSS untuk efek zoom pada foto pasangan:
/* Animasi Foto Pasangan */
.foto-pasangan {
width: 100%;
max-width: 300px;
border-radius: 50%;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transform: scale(0);
animation: zoomIn 1s ease-out forwards;
animation-delay: 0.5s;
}
@keyframes zoomIn {
from { transform: scale(0); }
to { transform: scale(1); }
}
Langkah 3: Efek Hover pada Tombol RSVP
Tambahkan CSS berikut agar tombol terasa lebih interaktif:
/* Efek Hover RSVP */
#btn-rsvp {
background-color: #b56576;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
margin-top: 20px;
transition: transform 0.3s, background 0.3s;
}
#btn-rsvp:hover {
background-color: #8a3f52;
transform: scale(1.1);
}
Langkah 4: Animasi Judul Halaman
Kita buat animasi slide down untuk judul undangan:
/* Animasi Judul */
h1 {
color: #b56576;
margin-top: 50px;
font-size: 36px;
opacity: 0;
transform: translateY(-30px);
animation: slideDown 1s ease-out forwards;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
Langkah 5: Hasil Akhir
Setelah semua kode ditambahkan:
- Halaman akan muncul perlahan (fade-in).
- Foto pasangan muncul dengan efek zoom in.
- Tombol RSVP membesar saat diarahkan kursor.
- Judul turun dari atas dengan halus.
Kesimpulan
Pada Part 5 ini, kita berhasil menambahkan animasi sederhana menggunakan CSS dan JavaScript agar undangan online terlihat lebih elegan. Di Part 6, kita akan melanjutkan dengan menambahkan musik latar dan countdown timer untuk membuat undangan semakin spesial.