Facebox jquery.mw

Hover Glow Another Link Effect Using Color Plugin

~ ~
Pagi hari posting tepatnya pukul 4 pagi. Pada kesempatan kali ini saya sedikit tertarik untuk bermain-main dengan jquery color plugin . Bermain-main dengan warna, cocok untuk blog atau situs yg colorfull atau main tabrak warna, xixixixix .

Macam effect hover link banyak sekali, dari sekedar menambahkan effect link pelangi, nudging, fade dan sebagainya . Nah Sekarang ini akan share Effect Glow . Untuk demonya bisa diliat disini .

Demo



Hmm gimanah ? lain dari pada yg lain kan ? Gini caranya..

1. seperti biasa script jquery nya... biasa di atas </head$gt;


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


2. ini color plugin nya . masukan di bawah script di atas yah..

<script src='http://granoblog.googlecode.com/files/color.js' type='text/javascript'/>


Nb: Bisa di hostingkan sendiri sob .

3. Ini script untuk effect glowng nya .

<script src='http://granoblog.googlecode.com/files/glowing.js' type='text/javascript'/>


Nb: Bisa di hosting kan sendiri .

4. Ini javascriptnya bro..

<script charset='utf-8' type='text/javascript'>
$(document).ready(function() {
$('a').addGlow({ textColor: 'blue', haloColor: 'blue', radius: 200, duration: 1000 });
$('*').bind('glow:started', console.info);
$('*').bind('glow:canceled', console.info);
});

</script>


Nb:
>> untuk text color adalah warna link saat mouseover .
>> untuk halo color adalah warna effect di belakang link .
>> radius seberapa besar effectnya .
>> duration seberapa cepat atau lambat effectnya berjalan .

script di atas bisa diganti atau di ubah-ubah sesuai selera .

Yup, selesai deh . cukup mudah kan ? gimana ? effect nya sedikit memberikan kesan berbeda dengan effect2 lain yg sudah banyak digunakan .

5 komentar:

Posting Komentar