jQuery Burn is a plugin which adds a flame-like effect to text using multiple text-shadows, animated by repeatedly changing their horizontal offsets.

The effect can be somewhat CPU intensive (especially for older computers), so use it sparingly. It can be stopped and restarted dynamically, colored, stretched, offset, sped up and slowed down. The flame motion is simulated with a simple wave equation solution.

Include jQuery and jRumble

Include jQuery and jQuery Burn just before your closing body tag. Make sure the paths to your files are correct. I recommend including via Google Libraries API.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.burn.js"></script>

Initialize jQuery Burn on a Selector

You can do this in a script tag within your HTML or in an external JavaScript file.

<h1 class="burning">I'm on fire!</h1>

.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;
}

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

$(document).ready(function() {
    $('.burning').burn({
        flames : [{
                  x: 0,
                  hsla: [300, 100, 80, .1],
                  y: 0,
                  blur: .1
              },
              {
                  x: 0,
                  hsla: [290, 100, 80, .8],
                  y: .02,
                  blur: .15
              },
              {
                  x: 0,
                  hsla: [280, 100, 80, .7],
                  y: .05,
                  blur: .2
              },
              {
                  x: 0,
                  hsla: [260, 100, 80, .6],
                  y: .1,
                  blur: .25
              },
              {
                  x: 0,
                  hsla: [240, 100, 80, .5],
                  y: .15,
                  blur: .3
              },
              {
                  x: 0,
                  hsla: [220, 100, 80, .4],
                  y: .25,
                  blur: .4
              },
              {
                  x: 0,
                  hsla: [200, 100, 80, .3],
                  y: .5,
                  blur: .5
          }]
      });
});

$(document).ready(function() {
  $('.burning').burn({
      a : 1,
      k : 5,
      w : 5,
      wind: 0,
      flames : [{
            x: 0,
            hsla: [0, 0, 0, .4],
            y: -.1,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .35],
            y: -.2,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .3],
            y: -.3,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .25],
            y: -.35,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .2],
            y: -.4,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .15],
            y: -.45,
            blur: 0
        },
        {
            x: 0,
            hsla: [0, 0, 0, .1],
            y: -.5,
            blur: 0
    }]
  });
});

Creating jQuery Burn lead to a lot of firsts for me, so I'd love for it to be learning tool for others.

Smooth animation

jQuery Burn uses requestAnimationFrame to optimize concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. Thanks to Paul Irish for the great introduction. This ensures that animation frames occur as frequently as possible while a page using the effect is visible and also that no animations will be performed if it is not; for instance, if the page is not a user's current active tab.

Automatic scaling

Since jQuery Burn's text shadow use EMs it will scale appropriately to size the target text, however you must target the text itself.

Typically this shouldn't be a problem, as the jquery burn effect is best used sparingly. Also, EMs (or REMs) are always an ideal choice of unit for all text, and text-effects, on a responsively designed website.

Aside from initialising jQuery Burn with custom options, any parameter can be altered dynamically.

Stop and Start

The flame effect on an element can be "turned off" using the off method. To invoke this method, call jQuery burn on the target object and pass it the boolean false as follows $(target).burn(false);.

To get or set a particular option, simply pass it by name as a string to the plugin invocation. Alternatively, any number of options can be changed simultaneously by passing an options hash.

$(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

jQuery Burn simulates the movement of a flame as simple harmonic motion.

It uses a traveling wave equation y(x,t) = Asin(kx - ωt) with a small random component to give some unpredictability. By scaling the horizontal motion with the distance of a shadow's vertical offset we are able to create a "flag-like" waving motion.

This simulation is very simplistic. It would be interesting to add variations in intensity, perhaps coupling changes in flame size with height and shifts to hotter colours. It is also rather processor intensive, perhaps use of css transitions between fewer flame "states" would reduce the frequency with which we interact with the page to create the illusion of fluid movement.