Cool Animated Fire Effects with CSS3 and jQuery

This effect has been created with some jQuery for setting different CSS3 text-shadow’s in a div. You can check the demo 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.

The CSS

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

The 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>

Update:

I’ve added some randomisation to the algorithm, as well as an individual animation to each of the letters (which, as a drawback, makes the effect run less smooth). I’ve also added a fourth shadow in dark yellow. You can freely use the code by keeping the mention to this site on it.

Thanks for reading and looking forward to read your thoughts!

Posted by: Dhiraj kumar