Cara Membuat Efek Fade In dan Fade Out dengan HTML, CSS, dan JavaScript

Efek animasi seperti fade in dan fade out sering digunakan untuk meningkatkan tampilan website agar terlihat lebih modern dan interaktif.

Pada tutorial ini, kamu akan belajar cara membuat efek tersebut menggunakan kombinasi HTML, CSS, dan JavaScript dengan cara yang sederhana.

Membuat Struktur HTML

Langkah pertama adalah membuat tombol dan elemen div yang akan ditampilkan atau disembunyikan.

Berikut contoh kode HTML:

<button id="toggleButton">Hide/Show Div</button>
<div id="hiddenDiv" style="display: block;">
  Content of hidden div
</div>

Penjelasan:

• Tombol digunakan untuk memicu aksi tampil atau sembunyi
• Div adalah elemen yang akan diberikan efek animasi

Menambahkan Efek Animasi dengan CSS

Selanjutnya, kita tambahkan efek animasi menggunakan properti CSS transition dan opacity.

#hiddenDiv {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

#hiddenDiv[style*="display: none"] {
  opacity: 0;
}

Penjelasan:

• transition digunakan untuk mengatur durasi animasi
• opacity mengatur transparansi elemen
• saat display none aktif, opacity menjadi 0 sehingga terlihat fade out

Menambahkan Interaksi dengan JavaScript

Agar tombol bisa mengontrol tampilan div, kita gunakan JavaScript.

const toggleButton = document.getElementById("toggleButton");
const hiddenDiv = document.getElementById("hiddenDiv");

toggleButton.addEventListener("click", function() {
  if (hiddenDiv.style.display === "none") {
    hiddenDiv.style.display = "block";
  } else {
    hiddenDiv.style.display = "none";
  }
});

Penjelasan:

• event click digunakan untuk mendeteksi klik tombol
• script akan mengecek apakah div sedang ditampilkan atau disembunyikan
• kemudian mengubah display sesuai kondisi

Cara Kerja Efek Fade

Alur kerja dari kode ini adalah:

• Tombol diklik oleh pengguna
• JavaScript mengubah nilai display
• CSS otomatis menjalankan animasi opacity
• Hasilnya muncul efek fade in atau fade out

Tips Pengembangan

Agar hasil lebih maksimal, kamu bisa mengembangkan fitur ini dengan:

• Menggunakan class toggle вместо inline style
• Menambahkan durasi animasi yang lebih halus
• Mengkombinasikan dengan transform atau scale
• Menghindari penggunaan display none untuk animasi yang lebih smooth

Kesimpulan

Membuat efek fade in dan fade out tidaklah sulit jika kamu memahami dasar HTML, CSS, dan JavaScript.

Dengan memanfaatkan transition dan opacity, kamu bisa membuat tampilan website menjadi lebih menarik dan interaktif.

Teknik ini sangat cocok digunakan untuk:

• Toggle konten
• Dropdown
• Modal
• Interaksi UI lainnya

Kalau kamu mau, nanti kita bisa lanjut ke versi yang lebih advanced seperti animasi menggunakan class toggle atau library seperti CSS animation dan JavaScript modern.