October 18, 2016
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
} );
Options:
- 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.
