Animated Particle Smoke Effect In jQuery - Bloodforge Smoke Effect

Bloodforge Smoke Effect is a simple-to-use jQuery plugin which helps you draw an animated, configurable particle smoke effect on an HTML5 canvas element.

How to use it:

1. Place jQuery library and the jquery.bloodforge.smoke-effect.js script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="src/jquery.bloodforge.smoke-effect.js"></script>

2. Create a container element (or HTML5 canvas element) on which you want to draw the smoke effect.

<div id="smoke-effect">
  Your own content here
</div>

<canvas id="smoke-effect-canvas"/>

3. Enable the particle smoke effect with default settings.

$('#smoke-effect, #smoke-effect-canvas').SmokeEffect();

4. Customize the particle smoke effect by overriding and passing the following options to the SmokeEffect() function.

$('#smoke-effect, #smoke-effect-canvas').SmokeEffect({

  // color of smoke
  color: 'black',

  // opacity level
  // 0.0 - 1.0
  opacity: 0.2,

  // density of smoke
  density: 8,

  // how quickly the smoke travels
  maximumVelocity: 1,

  //  how often to redraw the smoke
  fps: 15,

  // radius of each smoke particle
  particleRadius: 128
  
});

Change log:

2017-09-19

• requestAnimationFrame fix

---

This awesome jQuery plugin is developed by murst. For more Advanced Usages, please check the demo page or visit the official website.