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」についてでした。

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

Macのあらゆるアプリのショートカットの一覧を表示させることができる「CheatSheet」前のページ

Lightroomのレーティングを設定して画像を分類・整理・抽出するやり方次のページ

関連記事

  1. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  2. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  3. jQuery Navobile
  4. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  6. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

コメント

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

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

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP