Link Bergoyang-jQuery Link Nudging

Hari ini tidak bisa keluar rumah, Cisaga dari pagi sampai sore hari terus diguyur hujan. Dari pada bosen, aku nyetel musik eh jadi inget akhirnya aku buka blogku dan mulai menulis. Hari ini kita akan membuat link bergoyang dengan jQuery link nudging. Jadi efek yang dihasilakan dengan jquery ini jika sebuah link tersentuh kursi kursor, link tersebut akan bergerak. Untuk jelasnya lihat demo.

DEMO

Ingin membuatnya? Caranya gampang. Kamu tinggal menuju Edit HTML kemudian tambahkan script ini pada bagian head :

<script type='text/javascript'> 
var dur = 400; 
$(document).ready(function() {
$('a.goyang').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});
</script>

Syaratnya pada blog sobat harus ada script jquery latest ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script>

Untuk penerapannya pada pada link tinggal menambahkan class="goyang" seperti ini :

<a class="goyang" href="#">Text Link</a>

Selesai. Gampang bukan? Ya gampang, tapi punya temanku label dan arsipnya juga ikutan bergoyang. Bagaimana membuatnya? Ah itu sih gampang, tinggal menambahkan beberapa kode saja pada scriptnya seperti ini :

<script type='text/javascript'> 
var dur = 400; 
$(document).ready(function() {
$('a.goyang, .Label ul li a, .BlogArchive ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});
</script>

Begitu saja, script diatas bekerja pada label tampilan daftar serta arsip tampilan hirarki dan daftar flat.

sumber : http://derostellerblog.blogspot.com/2011/12/link-bergoyang-jquery-link-nudging.html

Cari Atikel Lainnya

Tweet

Written by Joy Silalahi

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.