🔥 jQuery plugin to apply flame effect to text
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

jQuery Burn: Text flame effect

jQuery Burn applies a simple flame effect to text using the css text-shadow property. As such it will not work in older versions of IE.

Usage

To turn on effect $('.burn').burn();

To turn off effect $('.burn').burn(false);

To get a single option, set a single option, or set multiple options:

$('.burn').burn('wind'); // returns 1
$('.burn').burn('diffusion', 2); // doubles the flame size
$('.burn').burn({
  k: 10,
  w: 10
}); // waves half as long and twice as fast

Options

Option Default Description
a 0.3 Amplitude of wave motion. A larger value leads to more pronounced oscillation.
k 0.05 Wave Number. A larger value leads to more oscillations per unit length, or a more wrinkled flame.
w 10 Angular Frequency. A larger value leads to quicker oscillations, or a higher frequency.
wind 1 Skew. A negative value for "wind" would make a vertical flame lean to the left. A value of 0 would make it perfectly vertical. A positive value makes it lean to the right. The larger the value, the greater the lean.
diffusion 1 A scale factor for both horizontal and vertical offset as well as shadow blur. A larger number leads to a flame which appears larger, though less intense.
flames array Array of shadows. The option "flames" can be set to a custom array, each element of which must be an object with strict properties as defined below. This allows for complete customisation of the effect. See advanced usage for more details.

Flame object

Option Default Description
x 0 Start displacement. This value has little long term impact and is best left as 0. It represents the initial horizontal offset of a particular flame and as is used internally to store the position of that flame.
hsla [58, 96, 89, 1] Colour of the shadow in HSLA.
y 0 Height vertical offset in em. It is best to pair increasing values of y with "hotter" colours.
blur 0.1 Size/clarity of the shadow. Larger value leads to a bigger and less sharply defined shadow.

License

Copyright (c) 2012 Kevin Attfield Dual licensed under the MIT and GPL licenses.