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

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  2. bubbly-bg

    JavaScript

    幻想的なバブル背景アニメーションを実装できる「bubbly-bg」

    bubbly-bgは幻想的で美しいバブル(気泡)背景アニメーションを実…

  3. Animated Page Transition
  4. no-image
  5. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  6. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

コメント

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

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

最近の記事

  1. 渋谷スクランブルスクエアからの夜景
  2. BELTZのバスクチーズケーキ
  3. iPhone 11 Pro Smart Battery Case ホワイト
  4. 渋谷スクランブル交差点

アーカイブ

PAGE TOP