Animasi Sederhana Menggunakan Intersection Observer

Anda memiliki animasi di situs web Anda, tetapi masalahnya adalah saat Anda menggulir ke bagian itu, animasi Anda sudah selesai. Tentu saja Anda ingin pengguna melihat animasi Anda, jadi bagaimana Anda akan menunda animasi hingga terlihat di viewport?

Pada artikel ini saya akan menunjukkan kepada Anda salah satu cara melakukannya dengan menggunakan Intersection Observer API.

Saya membuat elemen div dengan nama kelas "demo".

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

"Entri.target.classList.remove('kiri-kanan');" baris hapus kelas animasi .left-right setiap kali elemen div tidak terlihat di layar. Ingat pada pengaturan animasi kami pada 0% kami menetapkan -90vh sehingga kami dapat membuat 10vh terlihat? Alasannya adalah agar fungsi javascript tetap melihat elemen div dan kelas .left-right tidak akan dihapus saat animasi sedang dalam proses. Jika kelas animation .left-right akan membuat elemen tidak terlihat di layar di beberapa titik, itu akan memberi Anda hasil yang berbeda saat fungsi dipanggil. Skrip js tidak akan melihatnya di layar karena itu akan menghapus kelas dan kemudian elemen div akan memiliki posisi aslinya kembali, kiri: 0vh yang terlihat, kemudian akan memanggil fungsi lagi dan menambahkan animasi. Dan kemudian akan tidak terlihat lagi karena posisi awal animasi. Kelas akan dihapus dan ditambahkan berulang kali Anda tidak akan melihat proses animasi seperti yang Anda harapkan. Anda dapat menghapus baris “entry.target.classList.remove('left-right');” jika Anda ingin animasi hanya berjalan sekali, maka tidak apa-apa jika kelas dengan animasi Anda pada suatu saat akan membuat elemen tidak terlihat.

Ini hanyalah salah satu cara animasi berdasarkan posisi/visibilitas. Memiliki animasi di situs web Anda menarik dan membuat pemirsa bertahan lebih lama.