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

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

2012.02.28

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

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

[ads_center]

使い方

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

jQuery illuminate – Tony Lea

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'
    });
});