Membuat Halaman dengan efek animate.css dan WOW.js
Cara Membuat Halaman dengan efek animate.css dan WOW.js. Salah satu faktor SEO dari suatu halaman website adalah SEO Onpage dengan memberikan kesan terhadap setiap pengunjungnya pada saat mengunjungi halaman kita. Diantara sekian cara itu adalah dengan menerapkan animasi ke dalam efek-efek peralihan.Setiap mata pengunjung akan sangat menikmati efek cantik tersebut dan tentu saja membuat mereka betah dengan halaman kita. Dan hal itulah sasaran kita kali ini dalam optimasi OnPage SEO web.
Kalau hanya untuk membuat efek animasi biasanya para webdeveloper menggunakan efek dari animate CSS 3, namun terdapat kekurangan yaitu animasi akan tertutup oleh scroll, sehingga pengunjung tidak akan merasakan efek tersebut.
Untuk menutupi kekurangan tersebut maka kita perlu menambahkan javascript yaitu WOW.js yang nanti akan saya sertakan dalam tutorial dibawah. 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.
Baca Juga : Membuat Header Mengecil ketika di Scroll
Membuat Halaman dengan efek animate.css dan WOW.js
Baik, langsung saja kita mulai cara Membuat Halaman dengan efek animate.css dan WOW.js.1. Buka https://www.blogger.com
2. Cari </head> lalu copy paste kode dibawah ini.
Animate.css
<link href="https://dl.dropbox.com/s/dy890pni7k045na/animate.css?dl=0" rel="stylesheet" type="text/css"></link>
Javascript
<script src="https://dl.dropbox.com/s/kqyr5w7ia2q7fkb/wow.js?dl=0" type="text/javascript"></script> <script>new WOW().init();</script>
3. Simpan dan selesailah tahapan untuk persiapannya.
Penting :
Untuk menggunakannya adalah sebagai berikut.
Kalo biasanya kita dalam penggunaan animate.css adalah dengan kode seperti ini
<div class="animate fadeIn">Hello i'm fadeIn</div>
Maka kita harus merubah kode yang berwarna merah tersebut sehingga menjadi seperti ini.
<div class="wow fadeIn">Hello i'm fadeIn</div>
Untuk daftar lengkap silakan lihat dibawah ini
Efek
<div class="wow bounce">bounce</div>
<div class="wow flash">flash</div>
<div class="wow pulse">pulse</div>
<div class="wow rubberBand">rubberBand</div>
<div class="wow shake">shake</div>
<div class="wow swing">swing</div>
<div class="wow tada">tada</div>
<div class="wow wobble">wobble</div>
<div class="wow bounceIn">bounceIn</div>
<div class="wow bounceInDown">bounceInDown</div>
<div class="wow bounceInLeft">bounceInLeft</div>
<div class="wow bounceInRight">bounceInRight</div>
<div class="wow bounceInUp">bounceInUp</div>
<div class="wow bounceOut">bounceOut</div>
<div class="wow bounceOutDown">bounceOutDown</div>
<div class="wow bounceOutLeft">bounceOutLeft</div>
<div class="wow bounceOutRight">bounceOutRight</div>
<div class="wow bounceOutUp">bounceOutUp</div>
<div class="wow fadeIn">fadeIn</div>
<div class="wow fadeInDown">fadeInDown</div>
<div class="wow fadeInDownBig">fadeInDownBig</div>
<div class="wow fadeInLeft">fadeInLeft</div>
<div class="wow fadeInLeftBig">fadeInLeftBig</div>
<div class="wow fadeInRight">fadeInRight</div>
<div class="wow fadeInRightBig">fadeInRightBig</div>
<div class="wow fadeInUp">fadeInUp</div>
<div class="wow fadeInUpBig">fadeInUpBig</div>
<div class="wow fadeOut">fadeOut</div>
<div class="wow fadeOutDown">fadeOutDown</div>
<div class="wow fadeOutDownBig">fadeOutDownBig</div>
<div class="wow fadeOutLeft">fadeOutLeft</div>
<div class="wow fadeOutLeftBig">fadeOutLeftBig</div>
<div class="wow fadeOutRight">fadeOutRight</div>
<div class="wow fadeOutRightBig">fadeOutRightBig</div>
<div class="wow fadeOutUp">fadeOutUp</div>
<div class="wow fadeOutUpBig">fadeOutUpBig</div>
<div class="wow flip">flip</div>
<div class="wow flipInX">flipInX</div>
<div class="wow flipInY">flipInY</div>
<div class="wow flipOutX">flipOutX</div>
<div class="wow flipOutY">flipOutY</div>
<div class="wow lightSpeedIn">lightSpeedIn</div>
<div class="wow lightSpeedOut">lightSpeedOut</div>
<div class="wow rotateIn">rotateIn</div>
<div class="wow rotateInDownLeft">rotateInDownLeft</div>
<div class="wow rotateInDownRight">rotateInDownRight</div>
<div class="wow rotateInUpLeft">rotateInUpLeft</div>
<div class="wow rotateInUpRight">rotateInUpRight</div>
<div class="wow rotateOut">rotateOut</div>
<div class="wow rotateOutDownLeft">rotateOutDownLeft</div>
<div class="wow rotateOutDownRight">rotateOutDownRight</div>
<div class="wow rotateOutUpLeft">rotateOutUpLeft</div>
<div class="wow rotateOutUpRight">rotateOutUpRight</div>
<div class="wow hinge">hinge</div>
<div class="wow rollIn">rollIn</div>
<div class="wow rollOut">rollOut</div>
<div class="wow zoomIn">zoomIn</div>
<div class="wow zoomInDown">zoomInDown</div>
<div class="wow zoomInLeft">zoomInLeft</div>
<div class="wow zoomInRight">zoomInRight</div>
<div class="wow zoomInUp">zoomInUp</div>
<div class="wow zoomOut">zoomOut</div>
<div class="wow zoomOutDown">zoomOutDown</div>
<div class="wow zoomOutLeft">zoomOutLeft</div>
<div class="wow zoomOutRight">zoomOutRight</div>
<div class="wow zoomOutUp">zoomOutUp</div>
Contoh Efek animasi dengan waktu delay :
<div data-wow-delay=".25s" class="wow bounce">bounce</div>Contoh Efek dengan durasi waktu :
<div data-wow-duration="2s" data-wow-iteration="100" class="wow bounce">bounce</div>Contoh Efek dengan iterasi/pengulangan :
<div data-wow-iteration="100" class="wow bounce">bounce</div>
Ok. Selamat mencoba !!!
Sekian tutorial Cara Membuat Halaman dengan efek animate.css dan WOW.js, semoga bermanfaat dan terus semangat!! Terimakasih telah membaca artikel Agung Jaka Nugraha. Wassalam
