Animate.css With WOW.js

25 Maret 2016

Jika pada postingan sebelumnya saya membahas tentang Tutorial Menggunakan Animate.css, pada kali ini saya akan memberikan tutorial tentang penggunaan wow.js pada animate.css atau menerapkan wow.js pada aniamte.css. Apa itu wow.js? karena saya hanya memberikan tutorial bagaimana menggunakan wow.js pada aniamte.css jadi silahakan cari sendiri ya definisinya 😀

Untuk apa kita menggunakan wow.js? alasan kebanyakan developer menggunakan wow.js adalah untuk mempermudah pengelolaan animasi pada animate.css, maksudnya? for example, jika biasanya kita akan memberikan animasi pada element html dengan animate.css kita hanya perlu menambahkan class animasi dan classanimated untuk menjalankannya, betul kan?.

Cara ini memang sudah benar akan tetapi jika element html yang kita berikan animasi dengan animate.css tertutup scroll atau dibagian bawah website itu bagaimana? animasi pasti berjalan dengan sewajarnya namun kita tidak dapat melihat efeknya karena element tertutup oleh scroll bener kan?.

Jadi, fungsi wow.js ini adalah untuk menjalankan animasi dari class animate.css ketika element yang diberikan class animasi sudah terlihat dilayar monitor. Walapun element html tertutup scroll atau berada dibagian bawah website akan tetap bisa diberikan efek animasi dan animasi itu sendiri akan berjalan ketika element sudah tampak dilayar monitor, keren kan fungsi wow.js? penasaran? scroll kebawah bro!!

Step by step

Disini saya anggap kamu sudah bisa menggunakan animate.css ya. Jadi kita tinggal tambahkan beberapa baris kode tambahan yang kita perlukan saja untuk menjalankan wow.js pada animate.css.

1. Download wow.js nya dulu.

2. Simpan wow.js di folder website kamu. Struktur folder website saya:

folder_website/

– css/
– img/
– index.html (file akan digunakan)
– wow.min.js (file yang akan dipanggil)

3. Buka file yang akan sudah menggunakan animate.css dan panggil file wow.js dengan baris kode berikut (alamat file menuju wow.js harap disesuakian, disini saya ilustrasikan file wow.js sejajar dengan file yang sedang dibuka).

<script src="wow.min.js"></script>

<script>new WOW().init();</script>

4. Simpan file tersebut, cara penggunaanya kita hanya perlu mengubah class animated menjadi wow untuk menjalankan animasinya. For example.

<div class="wow fadeIn">Hello i'm fadeIn</div>

5. Contoh html diatas membuat animasi fadeIn kita bisa mencoba class animasi lainnya dari animate.css seperti fadeInLeft, bounceIn, rotateIn dan yang lain sebagainya.

Final Words

Mudah kan? semoga selesai baca postingan ini kamu gak tambah bingung ya 😀 kalau masih bingung silahkan tanyakan lewat kolom komentar. Terimakasih dan sampai jumpa.