jQuery Glow

JavaScript

マウスオーバーでテキストにふんわりとエフェクトをかけることができるjQueryプラグイン「jQuery Glow」

ちょっとしたアクセントによさげな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の使い方についてでした。以下からダウンロードできます。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  2. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  3. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  4. Tikslus Carousel
  5. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  6. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP