Skip to content
A jQuery plugin to create a background smoke effect in HTML elements
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
LICENSE
README.md

README.md

Bloodforge Smoke Effect

I stumbled upon a very neat piece of code written by Jonny Cornwell for a particle smoke effect. The concept was really neat, but I really wanted it to be easier to use. The end result is a jQuery plugin that allows the developer to add a particle smoke effect background to any element on the page.

See it in action by visiting my blog at https://bloodforge.com/#!/post/the-jquery-bloodforge-smoke-effect

Version History

  • 1.4: Performance improvements & code cleanup. Remove fps setting. Resize handling. Changed defaults. The density setting can now be changed after initialization.
  • 1.3: Allow the dynamic setting of SmokeEffect options.
  • 1.2: Smoke is now drawn directly to the canvas. You can now set the color of the smoke. Added color, opacity, and particleRadius settings. Removed backgroundColor, image, imageWidth, imageHeight settings.
  • 1.1: Removed webkit-specific drawing since it is no longer supported. Removed forceBackgroundRenderer setting.
  • 1.0: Initial release.

Support all modern browsers

<div id="smoke-effect" style="padding: 2em;">
   This works in all modern browsers!
</div>
<script>    
  $('#smoke-effect').SmokeEffect();
</script>

NOTE: In Microsoft Edge, this may cause flashing of the background. Instead, write directly to a canvas as described below.

Write directly to a canvas element

Also, if you call this directly on a CANVAS tag, it will draw directly to that element. This is the ideal method of using this plugin since it has the least impact on performance.

<canvas id="smoke-effect-canvas" width="300" height="100" />
<script>
   $('#smoke-effect-canvas').SmokeEffect();
</script>

Options

  • color: The color of the smoke. Default is black. If you pass a RGBA value, the alpha component will be ignored. To set the alpha, see opacity below.
  • opacity: The opacity of the color defined above. Default is 0.2
  • density: A number indicating how dense the smoke is. The higher the number, the more dense. The default is 10
  • maximumVelocity: A number indicating how quickly the smoke travels in pixels per second. The actual travel speed is somewhere in between 0 and this number. Default is 50
  • particleRadius: The radius of each smoke particle. Default is 150 pixels.

Example of setting all options (you don't need to set all}:

$('selector').SmokeEffect( {
    color: 'red',
    opacity: '0.35',
    density: 12,
    maximumVelocity: 75,
    particleRadius: 300
} );

Dynamically chaning options

You can also change certain settings after initialization. This applies to color, opacity, maximumVelocity, and particleRadius. For example:

$('selector').SmokeEffect('option', 'color', '#ff00ff');
You can’t perform that action at this time.