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!
