jQuery BloodForge Smoke Effect Plugin

BloodForge Smoke Effect Plugin is easy to setup and integrate in html and WordPress websites. Based on a particle smoke effect posted by Jonny Cornwell.

Can be used to apply a smoke / fog effect to a div as a background, or using canvas. Includes support for modern browsers (will slow down page loading).

Trigger effect:

$('selector').SmokeEffect( { 
    backgroundColor: '#FF0000', 
    density: 12. 
    maximumVelocity: 1.5, 
    fps: 20, 
    forceBackgroundRender: true, // additional browser supports
    image: 'http://myurl.com/mySmokeImage.png', 
    imageWidth: 100, 
    imageHeight: 150 
} );


  • backgroundColor: A hex or rgba value indicating the background color for the effect. Will inherit background from container. Default rgba(0, 0, 0, 0.5).
  • density: How dense the smoke is. Default 8.
  • maximumVelocity: How quickly the smoke travels. Default 1
  • fps: How often to redraw the smoke. Default 15
  • forceBackgroundRender: If set to true, this will make the SmokeEffect work in browsers that are not based on webkit. Default false
  • image: The image to use as the smoke particle. If you provide a custom image, you need to update the imageWidth and imageHeight properties below.
  • imageWidth: The width of the image for the smoke particle. Default 128 pixels.
  • imageHeight: The height of the image for the smoke particle. Default 128 pixels.

Benefits to using this plugin; it’s much simpler to apply the particle effect to multiple elements, or class name elements.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.