Pakek AOS , ngk ribet untuk Bikin Efek scroll Animasi
dengan AOS membuat animasi scroll jadi lebih mudah
sekarang apa itu AOS? AOS kepanjangan dari Animate on scroll. kamu bisa melakukan animasi dengan scroll.
dengan library ini, membuat animasi dengan scroll lebih mudah, kamu bisa liat-liat dan mengunjungi situs resminya di sini.
terkadang kita membutuhkan animasi pada web agar tampak hidup dan kece tentunya. dan library ini mungkin dapat membantu kita dalam melakukan hal itu.
dari yang saya pahami menggunakan library ini ternyata membuat efek scroll tidak sulit, terdapat banyak animasi yang bisa digunakan seperti fade animation, flip animation, slide animation, zoom animation, dan masih banyak lainnya.
untuk menggunakannya, jika kamu menggunakan package manager, kamu harus install package AOS nya.
jika kamu tidak menggunakan package manager, yang harus kamu lakukan adalah menyisipkan code di bawah ini, lalu di letakan di file html mu pada tag <head>
contohny seperti di bawah ini.
ketika sudah melakukan install, hal yang harus kamu lakukan adalah melakukan inisialisasi AOSnya.
letakan kode di atas pada tag script atau kamu bisa membut di file js terpisah. kamu bisa lihat contoh berikut.
pada AOS.init() juga memiliki penempatan objeck, hal ini bersifat opsional. misalnya kamu menginginkan sekali berhenti pada element yang beranimasi, mengatur offset, duration dan masih banyak lainnya. adapun contoh penggunaanya seperti ini
udah gitu aja,,hehhehhe.. cuss lanjutt.
nah, untuk proses inisialisasi mungkin sudah dapat gambaran selanjutnya bagaiman agar element beranimasi bisa berjalan. kita perlu menambahkan sebuah atribut dan valuenya di element yang kamu terapkan. contohnya kek gini.
kamu juga bisa kunjungi https://codepen.io/Fadli-Rivansyah/pen/BaVQxQR untuk melihat contoh hasil.
untuk atribut tidak hanya itu saja kamu juga dapat melakukan pengaturan terahadap durasi, offset scroll, delay, easing dan masih banyak lainnya.
untuk atribut dan value yang lebih lengkap, kamu perlu lihat di website resminya dan githubnya . karena untuk animasi cukup banyak yang dapat kamu lakukan sesuai kebutuhan kamu.
mungkin itu saja pembahasan dari, jika ada kesalahan kata saya minta maaf, karena saya juga butuh belajar. ok terimah kasih sudah melihat artikel ini.
