[JS]紹介せずにはいられなかったw、料理画像を出来たてほやほやのおいしそうに見せるスクリプト -Audero Smoke Effect

ページ上の画像をはじめ、あらゆる要素からアニメーションでほわわ〜んとしたあの煙をだすjQueryのプラグインを紹介します。

デモのアニメーション

Audero Smoke Effect -GitHub

Audero Smoke Effectのデモ

デモでは、あの煙が4種類あります。
IE6+をはじめ、ほとんどのブラウザに対応しています。

デモのキャプチャ

デモページ

煙はただの画像なので、別の煙の画像に変更して利用することもできます。

デモのキャプチャ

ほわーんとした煙

Audero Smoke Effectの使い方

Step 1: 外部ファイル

head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
      ...
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="../src/jquery.auderoSmokeEffect.js"></script>
</head>

Step 2: HTML

スクリプトでその要素を指定できるようidなどを付与しておきます。

<img id="chicken" src="images/chicken.png" />

Step 3: JavaScript

jQueryのセレクタで要素を指定し、アニメーションで表示する画像(煙など)を指定し、スクリプトを実行します。

<script>
$(window).load(function () {
   $("#chicken").auderoSmokeEffect({
      imagePath: "images/smoke.png"
   });
});
</script>

オプション

スクリプトのオプションでは、画像のパス、サイズ、表示位置、リピートの回数、間隔、スピードなどを設定できます。

<script>
   $(window).load(function() {
      $("#run-button").click(function() {
         $("#chicken").auderoSmokeEffect({
            imagePath: "images/smoke.png",
            width: 200,
            height: 200,
            posX: 0,
            posY: 0,
            repeat: 5,
            pause: 5000,
            speed: 3000
         });
      });
   });
</script>

top of page

©2017 coliss