jQuery smoke effects – Audero Smoke Effect plugin

This jQuery smoke effects plugin is an interesting solution for implementing smoke effects over the images.

jQuery smoke effects in action

Audero Smoke Effect is a jQuery plugin for creating a smoke effects for one or more elements (usually images). Good stuff for restaurant & food web designs, but for sure not only.

jQuery smoke effects plugin
jQuery smoke effects plugin

It’s cross-browser – the plugin has been tested, and works on all the major browsers, including IE.

Audero Smoke Effect follows the UMD (Universal Module Definition) pattern to work seamlessly with module systems such as AMD and CommonJS, and the browser.

Usage

Include libraries:

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.auderoSmokeEffect.js"></script>

The basic use of this plugin only require that you specify the imagePath property, to set the path to the image that will be used for the effect.

For example:

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

and an image called smoke.png inside a folder called images, you can run the effect with this JavaScript:

$('#chicken').auderoSmokeEffect({
   imagePath: 'images/smoke.png'
});

Disable the effect

After you initialize the plugin, you have the chance to disable it at any time. To disable the effect, you have to call the auderoSmokeEffect() method passing the string disable, e.g.:

$('#chicken').auderoSmokeEffect('disable');

Enable the effect

Once you disabled the plugin you may want to enable it again:

$('#chicken').auderoSmokeEffect('enable');

You can try it in the demo.

GitHub:

https://github.com/AurelioDeRosa/Audero-Smoke-Effect

See also:

http://jquery-plugins.net/jquery-bloodforge-smoke-effect

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1