Buat Halaman Website Menjadi Interaktif Dengan Library AOS

Apakah kalian bosan dengan website begitu-begitu saja rasa nya kok seperti ada yang kurang misal nya seperti tampilan atau animasi yang membuat kurang menarik pada mata. Nah mungkin dengan AOS ini solusi nya.

Apa itu AOS?. AOS adalah kependekan dari Animate On Scroll, Library AOS ini dikembangkan oleh developer bernama michalsnik (tertera di github pages nya). AOS ini fungsi nya untuk menambahkan suatu animasi ketika kita mengscroll halaman website.

Library AOS ini memang rekomended banget untuk para programmer atau developer untuk menambah poin UI pada website atau aplikasi dengan menambahkan animasi sehingga menjadi menarik di mata pengguna (user).

Kalian bisa mendapatkan Library AOS nya di github nya secara gratis. Berikut link nya michalsnik :

Michalsnik - AOS

Cara Install Library AOS

Tambahkan CSS dulu dan taruh di bawah <head>.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Kemudian pasang JavaScript nya di atas </body>.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

Cara Menambahkan Animasi AOS

Berikut nya adalah cara menambahkan animasi AOS nya. Tambahkan code berikut pada <div> atau apapun yang ingin ditambahkan animasi. Misal nya seperti yang saya buat seperti ini :

<h2 class="title has-text-left has-text-white" data-aos="fade" data-aos-duration="500">Ringkasan</h2>

data-aos="fade" data-aos-duration="500" ini lah yang akan berfungsi sebagai animasi pada saat kita scroll halaman website kita.

Nah kalian juga bisa baca melalui dokumentasi langungyang terdapat di Github nya Michalsnik. Dokumentasi nya sangat lengkap. Jika ada masalah silahkan komen di bawah ini ya, terima kasih.

programming