Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Cara Membuat AOS(Animation On Scroll) di Blog
Table of Contents
oke,kali ini saya akan membagikan tutorial blog yang sangat menarik,di sini saya akan membagikan tutorial AOS Animate on scroll untuk di blog seperti di blog saya yang sudah terpasang animate tersebut,mungkin kalian ada yang sudah tau animasi ini dan mungkin ada yang belum AOS animate on scroll memiliki pilihan animasi yang sangat menarik dan juga keren,langsung saja kita ke tutorialnya
Membuat AOS Animate on scroll di blog
2. Cari Kode <head> Kemudian paste kode di bawah ini tepat di bawahnya
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /><script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>Dan untuk cara pemanggilannya anda cukup copy kode di bawah ini dan paste di mana saja yang menurut anda pas
data-aos='zoom-out' data-aos-duration='3000'Contoh saya tempatkan di
<div id='footer-widget-container'> <div id='footer-widget-container' data-aos='zoom-in' data-aos-duration='3000'>Sebagai contoh saya menggunakanya di bagian footer
anda bisa ganti animasi "zoom-out" tersebut dengan animasi yang ada di bawah ini dan bisa juga ganti durasi animasi sesuka anda durasi saya di atas terdapat "3000" yang artinya durasi tersebut ialah 3 detik dan anda bisa mengubahnya sesuka anda untuk priview animasinya anda bisa lihat di sini Priview Animations AOS Animate scroll dan untuk demonya anda bisa liat di blog ini
List Animations AOS Animate on scroll
Fade animations:
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
Flip animations:
flip-up
flip-down
flip-left
flip-right
Slide animations:
slide-up
slide-down
slide-left
slide-right
Zoom animations:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right
Post a Comment