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

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  2. plainModal

    JavaScript

    カスタマイズ性が高いシンプルなモーダルウィンドウのjQueryプラグイン「plainModal」

    plainModalはシンプルでカスタマイズ性が高いモーダルウィンドウ…

  3. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  4. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

  5. jquery.confirmDialog

コメント

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

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

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP