Cara Membuat Animasi Ketika Web Di Scroll Dengan AOS

Cara Membuat Animasi Ketika Web Di Scroll Dengan AOS - Yahallo gaes , saat kalian mengunjungi blog exploit dan menscroll-nya ke bawah pasti akan ada animasi yang muncul seperti flip up ataupun seperti efek zoom gitu.Yap , efek seperti ini bisa menjadi alternatif lain dari smooth scrolling yang terkesan "b aja" .

Nah pada postingan kali ini saya ingin membagikan tutorial cara membuat animasi on scroll mirip seperti blog ini.Btw efek scroll yang saya terapkan tidak sepenuhnya buatan css sendiri melainkan menggunakan plugin bernama "AOS"

Ok tanpa banyak cincong skuyy lah ke tutorialnya aja:

1.Untuk dokumentasi lengkap dan penginstallan bisa kunjungi di laman resminya disini :

https://michalsnik.github.io/aos/

2.Back to topic , masuk ke Blogger > Tema > Edit HTML > Cari Kode </head> dan masukan kode berikut ini tepat diatasnya : 

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/aos.js"/>

3.Masih di Tema , sekarang cari kode </body> dan masukan source javascript berikut tepat diatasnya

<script>
  AOS.init({
  easing: 'ease-out-back',
  duration: 2000
 });
</script>

Note : atur berapa watku durasi animasi muncul pada teks yang  bewarna merah .

4.Terakhir untuk penggunaan animasinya cukup tambahkan code data-aos='flip-up' pada tag yang ingin kalian berikan animasi.Contohnya jika saya ingin menambahkann pada widget post jadinya seperti ini :

<article class='post' data-aos='flip-up'>
...
...
</article>

Jika sudah semua klik Simpan Tema dan lihat hasilnya .Ada banyak animasi kok yang bisa kamu pilih untuk versi lengkapnya bisa kalian cek pada link dokemntasi yang sudah saya bagikan di atas.

Ok itulah tadi Cara Membuat Animasi Ketika Web Di Scroll Dengan AOS .Jika ada pertanyaan terkait tutorial jangan sungkan untuk bertanya di kolom komen , see yaa.