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

    JavaScript

    水平スクロールでテキストが流れていくマーキー実装「hMarquee」

    hMarqueeは、水平スクロールでテキストが滑らかに流れていくマーキ…

  2. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  3. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  4. tabellajs

    JavaScript

    タッチ対応のレスポンシブなテーブルを実装できる「tabellajs」

    tabellajsはタッチに対応したレスポンシブで操作性のよいテーブル…

  5. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  6. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

コメント

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

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

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP