Membuat animasi dengan animate.css

Membuat animasi dengan animate.css

Tutorial Web Programming

Yooo, Akhirnyaa saya nulis lagi yoo
        Untuk kali ini, saya akan membagikan tutorial membuat efek animasi dengan animate.css. Animate.css dibuat oleh daniel Eden, dan bisa anda gunakan sepuas hati anda. Yo langsung aja yo.

Langkah pertama :

Masukan animate.css ke dalam script html anda, seperti ini :

<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet" />

Langkah kedua :

Tambahkan beberapa code jvascript untuk  membuat animasinya jalan, saya beri beberapa contoh

• Ketika mouse diatas objek animasi (hover) :

$('#animationSandbox1').hover(function(){
     $('#animationSandbox1').removeClass().addClass('tada animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){$(this).removeClass();});});
 *Untuk contoh diatas , objek memilik id=animationSandbox1 dengan animasi 'tada'.

• Ketika page berhasil diload

$(document).ready(function(){
   $('#animationSandbox1').removeClass().addClass('tada animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });});

Langkah ketiga

Silahkan berkreasi.

Live preview

Ditulis Unknown Pada 3:55:00 PM Komentar