Tutorial Membuat Efek Fade In dan Fade Out dengan JavaScript

Efek fade in dan fade out sering digunakan dalam pengembangan website untuk menampilkan atau menyembunyikan elemen dengan animasi yang halus. Efek ini membuat tampilan website terasa lebih interaktif dibandingkan hanya menampilkan atau menghilangkan elemen secara tiba-tiba.

Pada tutorial ini, kita akan membuat tombol yang dapat mengubah tampilan satu atau beberapa elemen HTML menggunakan JavaScript, CSS transition, dan metode getElementsByClassName().

1. Memahami Cara Kerjanya

Sebelum menulis kode, ada tiga bagian utama yang perlu dipahami:

• HTML: menyediakan tombol dan elemen yang akan diberi animasi.
• CSS: mengatur transparansi elemen menggunakan properti opacity dan durasi animasi melalui transition.
• JavaScript: mendeteksi klik tombol dan menambahkan atau menghapus class CSS untuk mengubah tampilan elemen.

Kita juga akan menggunakan beberapa metode JavaScript berikut:

• getElementById() untuk mengambil tombol berdasarkan ID.
• getElementsByClassName() untuk mengambil seluruh elemen yang memiliki class tertentu.
• addEventListener() untuk menjalankan fungsi ketika tombol diklik.
• classList.contains(), classList.add(), dan classList.remove() untuk memeriksa serta mengubah class elemen.

2. Membuat Struktur HTML

Pertama, buat sebuah tombol dan beberapa elemen div yang akan diberi efek animasi.

<button id="toggle-button">Toggle</button>

<div class="fade-element">Elemen pertama</div>
<div class="fade-element">Elemen kedua</div>
<div class="fade-element">Elemen ketiga</div>

Tombol menggunakan ID toggle-button, sedangkan setiap elemen yang akan diberi animasi menggunakan class fade-element.

Karena ketiga elemen memiliki class yang sama, JavaScript dapat mengambil dan memproses semuanya sekaligus.

3. Menambahkan CSS untuk Animasi Fade

Selanjutnya, tambahkan kode CSS berikut.

.fade-element {
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-element.fade-in {
  opacity: 1;
}

Penjelasan kode:

• opacity: 0 membuat elemen transparan.
• opacity: 1 membuat elemen terlihat sepenuhnya.
• transition: opacity 1s ease membuat perubahan transparansi berlangsung selama satu detik dengan transisi yang halus.
• .fade-element.fade-in hanya menerapkan transparansi penuh ketika elemen memiliki kedua class tersebut.

Pada tahap ini, elemen belum terlihat karena nilai awal opacity adalah 0. Namun, elemen masih menempati ruang dalam halaman karena kita belum mengubah properti display atau visibility.

4. Menambahkan JavaScript untuk Tombol Toggle

Setelah HTML dan CSS siap, tambahkan JavaScript berikut.

var button = document.getElementById("toggle-button");
var elements = document.getElementsByClassName("fade-element");

button.addEventListener("click", function () {
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    if (element.classList.contains("fade-in")) {
      element.classList.remove("fade-in");
    } else {
      element.classList.add("fade-in");
    }
  }
});

Berikut fungsi setiap bagian kode:

Mengambil tombol

var button = document.getElementById("toggle-button");

Baris ini mengambil elemen tombol berdasarkan ID yang telah dibuat pada HTML.

Mengambil semua elemen

var elements = document.getElementsByClassName("fade-element");

Metode getElementsByClassName() mengembalikan koleksi elemen yang memiliki class fade-element. Koleksi ini bersifat live, sehingga mencerminkan perubahan keanggotaan elemen secara langsung.

Mendeteksi klik tombol

button.addEventListener("click", function () {
  // Kode dijalankan ketika tombol diklik
});

Ketika tombol diklik, fungsi di dalam addEventListener() akan dijalankan.

Memproses setiap elemen

for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
}

Perulangan for digunakan untuk memproses setiap elemen yang ditemukan.

Mengubah class animasi

if (element.classList.contains("fade-in")) {
  element.classList.remove("fade-in");
} else {
  element.classList.add("fade-in");
}

Jika elemen sudah memiliki class fade-in, class tersebut dihapus sehingga elemen kembali transparan. Jika belum memilikinya, class ditambahkan sehingga elemen menjadi terlihat.

5. Menggabungkan Kode Menjadi Satu File HTML

Agar lebih mudah dipraktikkan, berikut contoh lengkap yang bisa langsung disimpan sebagai index.html dan dibuka di browser.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo Fade In dan Fade Out</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 30px;
    }

    #toggle-button {
      padding: 10px 18px;
      margin-bottom: 20px;
      cursor: pointer;
    }

    .fade-element {
      opacity: 0;
      transition: opacity 1s ease;
      padding: 15px;
      margin-bottom: 10px;
      background: #e8f2ff;
      border-radius: 6px;
    }

    .fade-element.fade-in {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .fade-element {
        transition: none;
      }
    }
  </style>
</head>
<body>

  <h1>Demo Efek Fade In dan Fade Out</h1>

  <button id="toggle-button" type="button">
    Tampilkan / Sembunyikan
  </button>

  <div class="fade-element">Elemen pertama</div>
  <div class="fade-element">Elemen kedua</div>
  <div class="fade-element">Elemen ketiga</div>

  <script>
    var button = document.getElementById("toggle-button");
    var elements = document.getElementsByClassName("fade-element");

    button.addEventListener("click", function () {
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];

        if (element.classList.contains("fade-in")) {
          element.classList.remove("fade-in");
        } else {
          element.classList.add("fade-in");
        }
      }
    });
  </script>

</body>
</html>

Simpan kode tersebut, lalu buka file index.html di browser. Klik tombol Tampilkan / Sembunyikan untuk melihat perubahan transparansi ketiga elemen.

6. Mengubah Durasi Animasi

Durasi animasi dapat disesuaikan melalui properti CSS transition.

Contohnya:

/* Animasi cepat */
transition: opacity 0.3s ease;

/* Animasi standar */
transition: opacity 1s ease;

/* Animasi lebih lambat */
transition: opacity 2s ease;

Semakin besar nilai waktunya, semakin lama perubahan transparansi berlangsung. Kamu juga dapat mengubah fungsi transisi, misalnya menggunakan ease-in, ease-out, atau linear.

7. Catatan Penting: Opacity Berbeda dengan Display

Pada contoh di atas, elemen yang memiliki opacity: 0 hanya menjadi transparan. Elemen masih menempati ruang halaman dan secara umum masih dapat menerima interaksi.

Jika tujuanmu adalah membuat elemen benar-benar tidak terlihat dan tidak dapat menerima klik ketika disembunyikan, kamu perlu mempertimbangkan pendekatan tambahan, seperti visibility, pointer-events, atau pengelolaan atribut inert sesuai kebutuhan.

Jangan langsung mengubah display: none ketika ingin menjalankan animasi fade-out, karena perubahan tersebut dapat menghilangkan elemen dari tampilan sebelum transisi opacity selesai.

Kesimpulan

Membuat efek fade in dan fade out menggunakan JavaScript dapat dilakukan dengan menggabungkan getElementsByClassName(), addEventListener(), classList, dan CSS transition.

Metode ini cocok untuk animasi sederhana pada beberapa elemen HTML, misalnya panel informasi, pesan notifikasi, atau konten tambahan. Dengan memahami cara kerja HTML, CSS, dan JavaScript secara bersamaan, kamu dapat mengembangkan interaksi website yang lebih menarik dan mudah digunakan.