JavaScript

テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」

テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」を使ってみました。手軽にテキストにアクセントをつけられるのでとても便利ですね。燃えるような熱いメッセージを伝えたい場合に効果的かと思います。ということで、以下、使い方です。

[ads_center]

使い方

jQueryとダウンロードしたプラグインをhead内に読み込み、jQuery Burnをセットします。

<script type="text/javascript" src="jquery.burn.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.burning').burn();
});
</script>

エフェクトを適用する要素にjQuery Burnのセレクタにセットしたクラス名を指定します。

<h2 class="burning">jQuery Burn Sample</h2>

CSSでデザインを調整したい場合はクラス名のburningに指定していけばOKです。

.burning {
    color: #fff;
    background: #333;
    font-size: 50px;
    font-weight: bold;
    padding: 3px;
    border-radius: 5px;
    text-align: center;
}

オプションでは波動の振幅、波数、風や拡散の強弱などを指定することができます。こんな感じで指定します。

<script type="text/javascript">
$(document).ready(function() {
    $('.burning').burn({
        a: 1,
        k: 1,
        w: 5,
        wind: 2,
        diffusion: 1.5
    });
});
</script>

詳しい内容に関しては公式サイトをご確認ください。ということで、テキストに炎のようなエフェクトを追加してくれるjQueryプラグイン「jQuery Burn」についてでした。

以下からダウンロードできます。

関連記事

  1. no-image
  2. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

  3. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  4. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. HR Navigation Responsive Menu

コメント

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

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

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP