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の使い方についてでした。以下からダウンロードできます。

LifeProof iPhone 5 ケース(ブラック)薄くて軽量な防水・防塵・耐衝撃の「LifeProof iPhone 5 ケース(ブラック)」のレビュー前のページ

Macのメモリ解放ソフト「Memory Clean」を使ってみた次のページ設定の開き方

関連記事

  1. Square Menu
  2. jQuery Pit-scheduler v2.0
  3. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  4. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  5. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

  6. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

コメント

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

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

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP