Pulsating and glowing text with CSS3 and JavaScript
The other day I needed to create an animated glow on some text. I quickly found the jQuery glow plugin but it didn’t work in Firefox 4.0.1, no idea why and I didn’t care to find out either.
However, this example worked. Note however that the code itself is pretty useless for everyday work, it’s very demo oriented. Hence I redid it so that it’s more practical, the basic premise is the same though, we “animate” by using setTimeout in a kind of recursive way.
Let’s first list the code and discuss it below:
function glowPulse(selector, min_radius, max_radius, speed, r, g, b, inc, radius){
inc = inc == null ? 1 : inc;
radius = radius == null ? min_radius : radius;
if(radius <= min_radius)
inc = 1;
else if(radius >= max_radius)
inc = -1;
$(selector).css("text-shadow", "0px 0px "+radius+"px rgb("+r+","+g+","+b+")");
setTimeout("glowPulse('"+selector+"',"+[min_radius, max_radius, speed, r, g, b, inc, radius+inc].join(',')+")", speed);
}As you can see the first seven arguments are used when we call glowPulse and the two last ones are used “internally”. If the current glow radius is less than or equal to the value we have set as the minimum glow radius we start to expand the radius. On the other hand, if the radius is bigger than or equal to the max value we’ve set we start to decrease the radius.
We then actually apply the radius through a jQuery.css call using the text-shadow style attribute.
Finally we setup the next “round” by calling glowPulse from within glowPulse, note how we increase/decrease the radius through this call, note also that the speed value is actually the time offset value used to determine the time interval that should pass before we run glowPulse again.
Here is an example call:
glowPulse(".middle-td:first", 0, 5, 50, 255, 255, 255);We apply the effect to the text in the first element with the class “middle-td” and we set the minimum radius to 0 pixels and max to 5 pixels, the update frequency is 50 ms and the glow color is white.
An example/demo of the effect can be seen here.