jQuery plugin to apply flame effect to text
JavaScript
Pull request Compare This branch is 6 commits behind Sinetheta:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
LICENSE-GPL
LICENSE-MIT
README.md
jquery.burn.js
jquery.burn.min.js

README.md

jQuery Burn: Text flame effect

http://sinetheta.github.com/burn/

jQuery Burn applies a simple flame effect to text using the css text-shadow property. As such it currently does not work in IE http://caniuse.com/css-textshadow

Usage

<script>
(function(){
    $(document).ready(function() {
        $(target).burn();
    });
})(jQuery);
</script>

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

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

$(target).burn('wind'); // returns 1
$(target).burn('diffusion', 2); // doubles the flame size
$(target).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.
interval 100 Animation interval in milliseconds . A larger value would lead to choppier animation, but demand less performance from a visitor's computer.
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.