Cara Membuat Animasi Pada Web Ketika Di Scroll

Diposting pada
Cara Membuat Animasi Pada Web Ketika Di Scroll


Cara Membuat Animasi Pada Web Ketika Di Scroll – Membuat animasi pada halaman web ketika discroll tentunya akan menjadi sangat menarik perhatian. Memasang animasi tersebut sangatlah mudah, karna kita hanya perlu memasang beberapa script.
Disini saya menggunakan Plugin yang bernama AOS Animate, yang didalam plugin tersebut terdapat berbagai macam Animasi, Mulai dari efek Fade, Flip, dan Zoom. Hal menarik lainnya dari Plugin AOS Animate ini adalah kalian dapat mengatur durasi animasi tersebut akan muncul seberapa lama/cepat akan muncul. Animasi ini juga dapat berjalan di berbagai Browser, seperti Browser Chrome, Firefox, IE, Safari, dsb. 
AOS Animate sendiri dibuat oleh Michalsnik yang sangat gemar membuat Library Animasi on Scroll dan membagikannya melalui Github. Githubnya sendiri sudah mendapatkan 14.000+ Bintang, total Fork sebanyak 1400+, dan memiliki pengikut sebanyak 1000+. 

Lihat Selengkapnya Michalsnik

AOS Animate ini dapat kalian download dan gunakan secara gratis beserta dokumentasi bagaimana cara menggunakan Animasi AOS ini. Untuk Mengetahui lebih detail mengenai AOS Animate kalian dapat mengunjungi Link Github dibawah ini.

https://github.com/michalsnik/aos

Oke tidak perlu berlama-lama langsung saja kita ke tutorial bagaimana cara memasang dan menggunakan AOS Animate.

Cara Membuat Efek Animasi Ketika Halaman Web di Scroll

Ingat untuk dokumentasi Animasi AOS ini, kalian dapat melihat dihalaman github yang saya bagikan sebelumnya.
1. Pertama, letakkan source code CSS dan Javascript dibawah ini diatas </head>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js/>
2. Lalu, letakkan Javascript dibawah ini diatas </body> atau didalam file Javascript kalian, script ini berisi durasi Animasi akan muncul ketika halaman web discroll.

<script>
AOS.init({
easing:'ease-out-back',
duration:2000 //Atur Durasi Sesuai Keinginan
});
</script>
3. Untuk menggunakan Animasinya, tambahkan code ini data-aos='fade-right' pada tag HTML yang ingin kalian beri Animasi. Sebagai contoh yang saya terapkan pada web ini :
<div class='widget PopularPosts1'>
<div class='widget-content'>
<div class='post' data-aos='fade-right'>
...
...
</div>
</div>
</div>

Jika sudah mengikuti semua tutorial diatas, selanjutnya simpan dan lihat hasilnya. Oke dan semoga dengan adanya artikel ini dapat membantu kalian agar tampilan website kalian jadi lebih menarik dan semoga bermanfaat.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *