jQuery Burn

Some men just want to watch the text burn!

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.

Download

Fastest way to get started: get the minified versions of the JS. No style sheets or images required.

Download Plugin

Visit GitHub

See the unminified source and the project history.

Project GitHub

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();
});

I'm on fire!

I'm on space-fire!

$(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
          }]
      });
});

I am le tired!

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

Target text

S C A L E

The best target is the element responsible for the text's font-size. In this case, the <span> surrounding each individual letter

Target container

S C A L E

If you target a container then all descendant elements will inherit the same sized text shadow.

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.

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.

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

Toggle demo

Start me up!

Intensity control

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.

Traveling sine wave

Flame "spine" motion

Amplitude

Wave Number

Frequency

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.