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. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  2. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  3. paroller.js

    JavaScript

    垂直・水平の動きに対応したパララックス効果を実装できる「paroller.js」

    paroller.jsは垂直・水平方向の動きに対応したパララックス効果…

  4. TV Credits

    JavaScript

    垂直・水平方向に滑らかに流れていくティッカーを実装できるjQueryプラグイン「TV Credits…

    TV Creditsは垂直方向や水平方向に流れていくティッカーを実装す…

  5. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  6. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

コメント

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

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

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP