jQuery Burn

Usage

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.

Features

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

SCALE

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

Target container

SCAL 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.

Documentation

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.

Wave Equation

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

It uses a traveling wave equationy(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.