CSS Animation show on viewport

 Tentu saja! CSS animation dapat diatur untuk muncul atau dimulai ketika elemen yang dianimasikan terlihat dalam viewport (area pandang pengguna). Ada beberapa cara untuk mencapai efek ini:

1. Menggunakan JavaScript untuk Mengontrol Kelas Animasi:

Ini adalah cara yang paling umum dan fleksibel. Anda akan menggunakan JavaScript untuk mendeteksi apakah elemen berada dalam viewport, dan kemudian menambahkan atau menghapus kelas CSS yang memicu animasi.

• CSS (tanpa animasi awal):

  CSS

  .element-animasi {
      opacity: 0; /* Contoh: elemen awalnya tidak terlihat */
      transform: translateY(20px); /* Contoh: elemen awalnya sedikit turun */
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .element-animasi.muncul {
      opacity: 1;
      transform: translateY(0);
  }
  

• JavaScript (menggunakan Intersection Observer API - cara modern dan efisien):

  JavaScript

  const elemenAnimasi = document.querySelectorAll('.element-animasi');
  
  const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              entry.target.classList.add('muncul');
              observer.unobserve(entry.target); // Berhenti mengamati setelah muncul
          }
      });
  });
  
  elemenAnimasi.forEach(elemen => {
      observer.observe(elemen);
  });
  

  • Intersection Observer API secara efisien memantau perubahan persilangan antara elemen target dan viewport atau elemen lain.
  • Ketika elemen masuk ke dalam viewport (entry.isIntersecting menjadi true), kelas .muncul ditambahkan, memicu animasi.
  • observer.unobserve(entry.target) akan menghentikan pengamatan setelah animasi terjadi (opsional, tergantung kebutuhan).

• JavaScript (menggunakan getBoundingClientRect() - cara yang lebih tradisional):

  JavaScript

  function cekApakahTerlihat() {
      const elemenAnimasi = document.querySelectorAll('.element-animasi');
      elemenAnimasi.forEach(elemen => {
          const rect = elemen.getBoundingClientRect();
          const isVisible = (
              rect.top >= 0 &&
              rect.left >= 0 &&
              rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
              rect.right <= (window.innerWidth || document.documentElement.clientWidth)
          );
  
          if (isVisible && !elemen.classList.contains('muncul')) {
              elemen.classList.add('muncul');
          }
      });
  }
  
  // Panggil saat halaman dimuat dan saat di-scroll
  window.addEventListener('load', cekApakahTerlihat);
  window.addEventListener('scroll', cekApakahTerlihat);
  

  • getBoundingClientRect() mendapatkan ukuran dan posisi elemen relatif terhadap viewport.
  • Fungsi cekApakahTerlihat() memeriksa apakah elemen berada dalam viewport.
  • Kelas .muncul ditambahkan jika elemen terlihat dan belum memiliki kelas tersebut.

2. Menggunakan CSS animation-delay dengan JavaScript (lebih sederhana untuk kasus tertentu):

Anda dapat memberikan animation-delay yang sangat lama pada animasi, dan kemudian menggunakan JavaScript untuk menghapus atau mengubah animation-delay ketika elemen terlihat.

• CSS:

  CSS

  .element-animasi {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      animation: muncul-dari-bawah 0.5s ease-in-out 9999s forwards; /* Delay sangat lama */
  }
  
  @keyframes muncul-dari-bawah {
      from {
          opacity: 0;
          transform: translateY(20px);
      }
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  

• JavaScript (menggunakan Intersection Observer API):

  JavaScript

  const elemenAnimasi = document.querySelectorAll('.element-animasi');
  
  const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
          if (entry.isIntersecting) {
              entry.target.style.animationDelay = '0s'; // Hapus delay
              observer.unobserve(entry.target);
          }
      });
  });
  
  elemenAnimasi.forEach(elemen => {
      observer.observe(elemen);
  });
  

Mana yang sebaiknya digunakan?

• Intersection Observer API adalah cara yang paling modern, efisien, dan direkomendasikan untuk mendeteksi visibilitas elemen. Kinerjanya lebih baik dibandingkan menggunakan event scroll secara langsung.
• Menggunakan JavaScript untuk menambahkan/menghapus kelas memberikan fleksibilitas lebih dalam mengontrol animasi dan transisi.
• Menggunakan animation-delay bisa menjadi solusi yang lebih sederhana untuk kasus animasi dasar, tetapi kurang fleksibel dibandingkan dua cara sebelumnya.

Pilihlah metode yang paling sesuai dengan kompleksitas animasi dan kebutuhan proyek Anda. Jika Anda baru memulai, Intersection Observer API adalah pilihan yang baik untuk dipelajari.

With JQuery

Tentu, jika Anda lebih nyaman menggunakan jQuery, Anda dapat mencapai efek animasi saat elemen terlihat di viewport dengan cara berikut:

1. Menggunakan jQuery dan Fungsi $(window).scroll() serta $.fn.offset().top:

Cara ini melibatkan pengecekan posisi scroll jendela dan posisi elemen menggunakan fungsi-fungsi jQuery.

JavaScript

$(document).ready(function() {
  $(window).scroll(function() {
    $('.element-animasi').each(function() {
      var elementTop = $(this).offset().top;
      var windowBottom = $(window).scrollTop() + $(window).height();

      if (elementTop < windowBottom) {
        $(this).addClass('muncul');
      }
    });
  });

  // Panggil sekali saat halaman dimuat jika ada elemen yang sudah terlihat di awal
  $(window).trigger('scroll');
});

• CSS (sama seperti contoh sebelumnya):

  CSS

  .element-animasi {
      opacity: 0; /* Contoh: elemen awalnya tidak terlihat */
      transform: translateY(20px); /* Contoh: elemen awalnya sedikit turun */
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .element-animasi.muncul {
      opacity: 1;
      transform: translateY(0);
  }
  

Penjelasan Kode jQuery:

1. $(document).ready(function() { ... });: Memastikan kode di dalam berjalan setelah seluruh DOM (Document Object Model) selesai dimuat.
2. $(window).scroll(function() { ... });: Mendaftarkan sebuah fungsi yang akan dijalankan setiap kali terjadi peristiwa scroll pada jendela browser.
3. $('.element-animasi').each(function() { ... });: Mengiterasi setiap elemen dengan kelas .element-animasi.
4. var elementTop = $(this).offset().top;: Mendapatkan posisi vertikal elemen relatif terhadap dokumen.
5. var windowBottom = $(window).scrollTop() + $(window).height();: Mendapatkan posisi vertikal bagian bawah jendela browser yang terlihat. $(window).scrollTop() mendapatkan posisi scroll vertikal saat ini, dan $(window).height() mendapatkan tinggi jendela browser.
6. if (elementTop < windowBottom) { ... }: Memeriksa apakah bagian atas elemen sudah masuk ke dalam area pandang jendela. Jika ya, maka:
7. $(this).addClass('muncul');: Menambahkan kelas .muncul ke elemen, yang akan memicu animasi CSS.
8. $(window).trigger('scroll');: Memicu peristiwa scroll sekali setelah halaman dimuat. Ini penting untuk menampilkan animasi elemen yang mungkin sudah berada di dalam viewport saat halaman pertama kali dibuka tanpa perlu di-scroll.

Kelebihan Menggunakan jQuery:

• Sintaks yang lebih ringkas: Beberapa developer merasa sintaks jQuery lebih mudah dibaca dan ditulis dibandingkan JavaScript vanilla untuk manipulasi DOM dan event handling.
• Cross-browser compatibility: jQuery membantu mengatasi beberapa perbedaan perilaku antar browser.

Kekurangan Menggunakan jQuery:

• Ukuran library: Menambahkan jQuery ke proyek Anda akan meningkatkan ukuran file yang perlu diunduh oleh browser, yang dapat mempengaruhi performa halaman.
• Mungkin tidak lagi diperlukan untuk banyak kasus: Dengan perkembangan JavaScript modern dan adanya API seperti Intersection Observer, banyak tugas manipulasi DOM dan event handling dapat dilakukan secara efisien tanpa library tambahan.

Alternatif dengan Intersection Observer API menggunakan jQuery:

Anda juga dapat menggunakan Intersection Observer API dengan sedikit bantuan dari jQuery untuk pemilihan elemen:

JavaScript

$(document).ready(function() {
  const elemenAnimasi = $('.element-animasi');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        $(entry.target).addClass('muncul');
        observer.unobserve(entry.target);
      }
    });
  });

  elemenAnimasi.each(function() {
    observer.observe(this); // 'this' merujuk ke elemen DOM yang sedang diiterasi
  });
});

Cara ini menggabungkan kemudahan pemilihan elemen jQuery dengan efisiensi Intersection Observer API.

Kesimpulan:

Jika proyek Anda sudah menggunakan jQuery, menggunakan fungsi $(window).scroll() dan $.fn.offset().top adalah cara yang langsung dan umum untuk mencapai efek yang Anda inginkan. Namun, untuk proyek baru, mempertimbangkan penggunaan Intersection Observer API (bahkan dengan bantuan jQuery untuk pemilihan elemen) mungkin merupakan pilihan yang lebih modern dan efisien. Pilihlah pendekatan yang paling sesuai dengan kebutuhan dan konteks proyek Anda.