Animate.css With WOW.js
25 Maret 2016

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.
Custom Search
1$ | Donasi Kopi Untuk Sang Creator
Completely synergize resource is taxing relationships via premier are man niche markets. Professionally cultivate one to one customer.
Kategori
- Adobe
- Android
- Anti Virus
- Browser
- Canon Printer
- Design
- Desktop Programming
- Domain & Hosting
- Elektronika
- Freebies
- Games
- Games Ringan Pilihan
- Graphic Design
- How To
- Internet
- Kabel & Konektor
- Laptop Driver
- Linux
- Marketing
- Mikrotik
- Networking Area
- Office
- Out Of Topics
- Printer Driver
- Seo
- Software
- Technology
- Tools
- Uncategorized
- Utilities
- We Love β₯ Google
- Web Design
- Web Development
- Windows
Recent News
PERINTAH DASAR LINUX | LENGKAP UNTUK PEMULA
10 Maret 2021
Cara Mengganti Static ke Dynamic IP Address di Windows 10
15 Februari 2021
Tag
Arsip
- Maret 2021
- Februari 2021
- Januari 2021
- Desember 2020
- November 2020
- Oktober 2020
- September 2020
- Agustus 2020
- Juli 2020
- Juni 2020
- Mei 2020
- April 2020
- Maret 2020
- Februari 2020
- Januari 2020
- November 2019
- Oktober 2019
- September 2019
- Mei 2019
- April 2019
- Maret 2019
- Februari 2019
- Januari 2019
- Desember 2018
- November 2018
- September 2018
- Agustus 2018
- Juli 2018
- Juni 2018
- Mei 2018
- April 2018
- Maret 2018
- Februari 2018
- Januari 2018
- Desember 2017
- November 2017
- September 2017
- Agustus 2017
- Juli 2017
- Mei 2017
- April 2017
- Maret 2017
- Februari 2017
- Januari 2017
- Desember 2016
- November 2016
- Oktober 2016
- September 2016
- Agustus 2016
- Juni 2016
- Mei 2016
- April 2016
- Maret 2016
Comments (2)
john
14 Jun 2017 - 14:28Sudah saya coba n berhasil di IE & Mozila….tp kok di Chrome gagal?
Karunia Prima Aditya
29 Jul 2017 - 00:51dev google mempunya system java yang berbeda dari yg lain mbah, jadi bisa di sett di menu settings pada google chrome di pojok kanan atas. coba deh allaow java site script nya, pasti berhasil. tinggal tambahkan URL nya disitu kok mbah π selamat mencoba.