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

サイト構築 -JavaScript

Post on:2013年7月22日

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>