ちょっとしたアクセントによさげなjQueryプラグイン「jQuery Glow」を使ってみました。マウスオーバーするとテキストにふんわりとエフェクトをかけることができます。オプションでテキストや光の色、エフェクトが動くスピードなども自分で調整することができます。ということで、以下、使い方です。
[ads_center]
使い方
jQueryとダウンロードしたプラグインを読み込みます。
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <script type="text/javascript" src="jquery.color.js"></script> <script type="text/javascript" src="jquery-glowing.js"></script>
jQuery Glowを適用させたい要素をセレクタに指定します。
<script type="text/javascript">
$(document).ready(function() {
$('.sample').addGlow();
});
</script>
HTMLはこんな感じで。
<a href="#" class="sample1">サンプル1</a>
オプション
オプションを指定する場合は以下のようにします。
$('.sample').addGlow({
radius: 20, // 光の半径
textColor: '#F60', // テキストカラー
haloColor: '#F6C', // 光の色
duration: 200 // スピード
});
テキストの色はtextColor、光の色はhaloColorに指定すればOKです。光の大きさはradiusの数値で調整できます。エフェクトのスピードはdurationで設定変更可能です。
ということで、jQuery Glowの使い方についてでした。以下からダウンロードできます。
