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. JavaScript

    画像やHTML要素に簡単にドロップシャドウをつけられるjQueryプラグイン「pShadow」

    個人的にすごく便利で使う機会がありそなjQueryプラグインの紹介です…

  2. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  3. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

  4. Squishy

    JavaScript

    テキストをコンテナに合わせて自動でサイズ変更してくれるjQueryプラグイン「Squishy」

    SquishyというjQueryプラグインを使えばテキストをコンテナに…

  5. JavaScript

    チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js…

    指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQ…

  6. Chameleon.js

コメント

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

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

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP