Cool Animated Fire Effects with CSS3 and jQuery

JQuery

<script type="text/javascript">
var step = 1;
function nextShadow(){
 $('#onfire span').each(function(){
     y = parseFloat($(this).attr("y_pos"));
     y += step + Math.random()*3;
     $(this).attr("y_pos", y);
     shaking = Math.random();
     shadow1 = "0px 0px "+(y%5)+"px white";
     shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red";
     shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993";
     shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow";
     $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3);
 });
}
$(function(){
    $('#onfire span').each(function(){$(this).attr("y_pos","0");});
   setInterval(nextShadow, 50); 
});
</script>

CSS

#onfire{
      height:auto;
      padding-top:3em;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
      color:brown;
}

Description

This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check code to see how it’s done. Basically, the Javascript function creates 3 text-shadows (white, yellow and red) with coprime “cycle durations” so the effect looks more random even though it’s totally deterministic.

Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective.