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.

css3-jquery-animated-fire-effect

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>

view demo

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

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLJAVASCRIPTjQueryMobile Web TechnologyPhotoshopTutorialsadvance web technology,angle brackets,animation delay,animation direction,configurable settings,core code,cosine function,CSS,CSS 3,CSS 4,CSS code,CSS framework,css namespaces,CSS properties,css property,css selector,CSS technique,CSS trick,css3,css3 box shadow,demo code,doctype html,elements,enterprise-it,free open source,gaming,graphical user interface,grid,grid system,htm,html and xhtml,html basics,html elements,html tags,html tags attributes,html5,interactive web applications,javascript,javascript functions,javascript programmers,jquery,line tag,mobile,mobile CSS,open source javascript,optimized CSS,page elements,paragraph text,plugin,programming,project workflow,science,shadow1,software,software-development,style,technology,text shadows,transparent background image,transportation,visual transition,window loads,xhtml tagThis 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...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.