Cara Mengimplementasikan Animate.CSS Kedalam Hover Dengan Jquery
Di panduan kali ini kamu akan belajar bgaimana Cara Mengimplementasikan Animate CSS Kedalam Hover Dengan Jquery.
Sebelumnya ada yang tau animate.css ? ini ialah sebuah css package yang di bikin oleh Dan eden dimana file css tersebut akan mempermudah kita pada menggunakan guna css animate. Seandainya tak tau silahkan menuju link berikut :
https://daneden.github.io/animate.css/
oke sekarang ini saya asumsikan kalian telah tau cara menggunakan animate.css yang tadi saya beri tahu di atas. Karena cara menggunakannya hanya lumayan memberikan class yang telah di sediakan ke pada element yang ingin kita berikan animasi, nah sekarang ini pertanyaaanya kalau saya mau efek animasi itu saya gabungkan dengan HOVER gimana ?
bagi kasus seperti ini penyelsaianya sedikit berbeda karena kita mesti menggunakan jquery.
silahkan salin dan pelajari code saya di bawah ini, :
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>hover demo</title>
<style>
h1{text-align: center;margin-top:300px;cursor: default;}
</style>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css>
<script src=https://code.jquery.com/jquery-1.10.2.js></script>
</head>
<body>
<h1>Kursor ente Arahin dimari brohh...</h1>
<script>
$(document).ready(function(){
$(h1).hover(function(){
$('h1').addClass('animated rubberBand');
}
);
});
</script>
</body>
</html>
silahkan jalankan di browser masing-masing dan lihat hasilnya .
Sumber https://kursuswebsite.org
