jQuery Burn - Text Flame Like Effect Plugin

jQuery Burn is a text effect plugin using text-shadow, animated by repeatedly changing their horizontal offsets, which allows you to add flame-like effect to text on your web page.

How to use it:

1. Include jQuery script and jquery.burn.js on the webpage.

<script src="jquery.min.js"></script>
<script src="js/jquery.burn.js"></script>

2. The markup

<h1 class="burning">jQuerySciript.Net</h1>

3. The required CSS.

.burning{
  color: white;         /* A light text makes a nice bright flame source */
  background: black;    /* A dark background gives some contrast */
  letter-spacing: 3em;  /* Big text shows off the effect best */  
  font-weight: bold;
}

3. The JavaScript to enable the effect.

$(document).ready(function() {
  $('.burning').burn();
});

4. The default settings of the effect.

$('.burning').burn({
  a: .3,
  k: .05,
  w: 10,
  wind: 1,
  strength: 1,
  diffusion: 1,
  flames: [{
    x: 0,
    hsla: [58, 96, 89, 1],
    y: 0,
    blur: .1
  }, {
    x: 0,
    hsla: [51, 98, 76, 1],
    y: .02,
    blur: .15
  }, {
    x: 0,
    hsla: [36, 100, 60, 1],
    y: .04,
    blur: .2
  }, {
    x: 0,
    hsla: [28, 91, 49, 1],
    y: .08,
    blur: .25
  }, {
    x: 0,
    hsla: [19, 94, 41, 1],
    y: .15,
    blur: .3
  }, {
    x: 0,
    hsla: [15, 75, 34, 1],
    y: .2,
    blur: .4
  }, {
    x: 0,
    hsla: [14, 66, 16, 1],
    y: .5,
    blur: .5
  }]
});

---

This awesome jQuery plugin is developed by Sinetheta. For more Advanced Usages, please check the demo page or visit the official website.