This time I will share jQuery Plugin and tutorial about jQuery Plugin For Fancy Smoke Effects – Audero Smoke Effect, hope it will help you in programming stack.
| File Size: | 44.4 KB |
|---|---|
| Views Total: | 5540 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Audero Smoke Effect is a jQuery plugin that allows you to create animated Smoke Effects (such as smoke puff, cloud, etc) that appear from the given html elements on your website. Good for food and restaurant website designs.
Basic Usage:
1. Include the latest jQuery library and jQuery Audero Smoke Effect Plugin in the header
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
2 |
<script src="../src/jquery.auderoSmokeEffect.js"></script> |
2. Insert a image on your webpage
1 |
<img id="demo" src="images/chicken.png" /> |
3. Call the plugin with options
1 |
<script> |
2 |
$(window).load(function () { |
3 |
$("#demo").auderoSmokeEffect({ |
4 |
imagePath: "images/smoke.png" |
5 |
}); |
6 |
}); |
7 |
</script> |
4. Options
01 |
// The path to locate the smoke image. |
02 |
// This is the only required property. |
03 |
imagePath: null, |
04 |
05 |
// The state of the animation. |
06 |
// If the value is false, the animation will stop keeping its current options. |
07 |
isEnabled: true, |
08 |
09 |
// The width of the image shown to simulate the smoke. |
10 |
// If the value is 0, the width of the image will be used. |
11 |
width: 0, |
12 |
13 |
// The height of the image shown to simulate the smoke. |
14 |
// If the value is 0, the height of the image will be used. |
15 |
height: 0, |
16 |
17 |
// The number of times to repeat the animation. |
18 |
// -1 means unlimited. |
19 |
repeat: -1, |
20 |
21 |
// The time (milliseconds) between animations. |
22 |
// Set to random to have a random time. |
23 |
pause: 2000, |
24 |
25 |
// The time (milliseconds) taken by the animation. |
26 |
speed: 4000, |
27 |
28 |
// The X coordinate used as start point for the animation. |
29 |
// If the value is null, the effect will run at the center of the element, based on its width. |
30 |
posX: null, |
31 |
32 |
// The Y coordinate used as start point for the animation. |
33 |
// If the value is null, the effect will run at the center of the element, based on its height. |
34 |
posY: null, |
Change log:
2015-12-31
- Released version 1.2.0
This awesome jQuery plugin is developed by AurelioDeRosa. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
