. .
[iklan]

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


!





..





..





..!





..





.

0 comments:

Posting Komentar

Catatan Sementara

Assalamualaikum warahmatullahi wabarakatuh Bismillahirrohmanirrohim رَبَّنَا ظَلَمْنَاۤ اَنْفُسَنَا وَاِ نْ لَّمْ تَغْفِرْ لَـنَا وَتَرْحَمْنَا لَـنَكُوْنَنَّ مِنَ الْخٰسِرِيْنَ "Ya Tuhan kami, kami telah menzalimi diri kami sendiri. Jika Engkau tidak mengampuni kami dan memberi rahmat kepada kami, niscaya kami termasuk orang-orang yang rugi." (QS. Al-A'raf 7: Ayat 23). Ya Rahman ya Rahim, Jagalah kami dari neraka JahanamMu yg amat dahsyat. Sungguh, kami tidak akan mampu menjadi penghuninya, walau hanya sesaat. Yaa Aziz aku mohon , kembalikan kami smua di dlm Husnul khotimah.. Yaa ghofar ampuni dosa kedua orang tua kami , sdr2 kami serta orang2 Sholeh dan masukkan klg kami smua dlm surga-Mu . Aamiin 🤲
 
© 2021 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Galvalum | DepoAirIsiUlang | Seluruh Arsip