Trigger a CSS Animation on Scroll

Cara membuat animasi yang akan dijalankan setiap kali bagian halaman atau obyek terbuka atau tampil di screen. Untuk membuat animasinya, sederhana menggunakan @keyframes. Dan untuk menjalankannya pada setiap kali tampil di layar, animasi tersebut dipanggil menggunakan code javascript. Dengan cara ini, dalam satu halaman, animasi hanya bisa diterapkan dalam satu obyek. Obyek tersebut bisa berupa image atau dalam div. Untuk animasi yang bisa diterapkan pada banyak obyek per halaman, telah bagikan Animasi Viewport Scroll


Script yang digunakan adalah sebagai berikut:

<script>
const ob = document.querySelector('.ob');
ob.classList.remove('st');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      ob.classList.add('st');
      return;
    }

    ob.classList.remove('st');
  });
});

observer.observe(document.querySelector('.ani'));
</script>

CSS yang digunakan adalah sebagai berikut:

<style>
.st{animation: bin 2s ease}
@keyframes bin{
0%{opacity: 0.1;transform: scale(.3)}
50%{opacity: 1;transform: scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}}
</style>

0











..





..





..





.. 1


!





..





..





..!





..





.