JavaScript

jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

ちょっと面白そうだったので使ってみました。jQuery illuminateというプラグインなんですが、これを使えば簡単にボタンを光らせたり点滅させたりすることができます。注目してほしいボタンに使ったりするとよさそうですね。あんまり激しいとウザそうですが、ちょっとしたアクセントなんかにはいいかもしれません。以下、サンプルと使い方です。

[ads_center]

使い方

以下のサイトからダウンロードできます。

head内でjQuery本体、jQuery UIやプラグインを読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.illuminate.0.7.min.js"></script>

とりあえず簡単なHTMLで。

<div id="button">sample</div>

CSSも適当に。

#button {
    background: #67d100;
    color: #fff;
    border-radius: 3px;
    font-size: 27px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    padding: 10px;
    width: 150px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

あとはhead内で光らせたいボタンを指定するだけです。

<script type="text/javascript">
$(document).ready(function(){
    $('#button').illuminate();
});
</script>

一応簡単ですが以下、サンプルです。

サンプル

sample1
sample2
sample3

オプションでシャドウのカラーや点滅するスピードなども変更できます。以下のように指定できます。

$(document).ready(function(){
    $('#button').illuminate({
        'intensity': '0.3',
        'color': '#00f6ff',
        'blink': 'true',
        'blinkSpeed': '1200',
        'outerGlow': 'true',
        'outerGlowSize': '30px',
        'outerGlowColor': '#00cad1'
    });
});

オプション

以下、ちょっとしたオプションの解説です。

color
colorを指定すると点滅するタイミングに合わせてボタンの色が指定した色へ変化します。
blinkSpeed
点滅するスピードを指定できます。数値を小さくすると速くなり、大きくすると遅くなります。
outerGlowSize
光の部分であるシャドウの大きさを指定できます。
outerGlowColor
上記のシャドウの色を指定できます。

ということで、ボタンに注意を引かせたいとお考えの方はこれを使えば簡単にできるのでオススメです。1つの選択肢として知っておいて損はないっすね。

2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた前のページ

jQuery Mobileで簡単に自分のオリジナルテーマカラーを作成できるThemeRollerの使い方次のページ

関連記事

  1. Tikslus Carousel
  2. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  3. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  4. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  5. Audero Smoke Effect

    JavaScript

    スモーク(煙)のエフェクトを実装できるjQueryプラグイン「Audero Smoke Effect…

    スモーク(煙)のエフェクトを実装することができるjQueryプラグイン…

コメント

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

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

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP