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

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  2. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  3. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  4. ScalableLightbox

    JavaScript

    ミニマルでレスポンシブに対応したLightbox風のjQueryプラグイン「ScalableLigh…

    ScalableLightboxはミニマルなデザインでレスポンシブに対…

  5. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  6. Cube-jQuery-Slider

    JavaScript

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

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

コメント

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

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

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP