How to animate an HTML image to make it "glow"
We have a system where people click on an image in certain places and our designer wanted these "click points" to glow as they are clicked in order to make them both look good but also to make them look more obvious, otherwise it is hard choosing colours for images that work on top all kinds of coloured images without making them too obvious.
Anyway, she had designed them in Photoshop using an animation effect on the layer so my question was how to mimic this in HTML using (probably) jQuery animate() and some set of CSS values to make it glow.
A bit of searching and I found this article that shows how to make a very basic but very effective glow: http://www.onlywebpro.com/2010/09/19/
So this was easy enough to use as a starting point but there was more. By default, jQuery cannot animate the box shadow used in this "glow" so I needed an extension in the form of the box shadow animation plugin found here: http://www.bitstorm.org/jquery/shadow-animation/
Then it was a case of trial and error. Note that my images are circular but the default box shape is obviously square so I also had to add 50% border radius to make sure the box shadow was circular and not square. Also note that I am creating my images in Javascript but the same thing could be applied to an existing image(s).
CSS:
JavaScript:
Using the animation plugin, I can simply animate the box shadow from the default css to the values in the first animate call in 300 milliseconds and then when this is finished, it will call the inner function which will call animate again to take the values back to their defaults. Naturally you can modify the way these work and the timings. Also, you could use a Javascript timer if you want to keep triggering the animation. You must have a value in your CSS by default in order to animate it, you cannot animate from "null" to some value!
Have a play and see what you can do with it, it's pretty straightforward thanks to jQuery!
Anyway, she had designed them in Photoshop using an animation effect on the layer so my question was how to mimic this in HTML using (probably) jQuery animate() and some set of CSS values to make it glow.
A bit of searching and I found this article that shows how to make a very basic but very effective glow: http://www.onlywebpro.com/2010/09/19/
So this was easy enough to use as a starting point but there was more. By default, jQuery cannot animate the box shadow used in this "glow" so I needed an extension in the form of the box shadow animation plugin found here: http://www.bitstorm.org/jquery/shadow-animation/
Then it was a case of trial and error. Note that my images are circular but the default box shape is obviously square so I also had to add 50% border radius to make sure the box shadow was circular and not square. Also note that I am creating my images in Javascript but the same thing could be applied to an existing image(s).
CSS:
.fingerprint
{
border-radius: 50%;
-moz-box-shadow: 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: 0px 0px 0px 0px #ffffff;
box-shadow: 0px 0px 0px 0px #ffffff;
}
JavaScript:
$("<img src='../Images/orange1.png' class='fingerprint' />")
.appendTo("#clickTarget")
.show()
.animate({ boxShadow: "0px 0px 10px 7px rgb(255,255,255)" }, 300, function ()
{
$(this).animate({ boxShadow: "0px 0px 0px 0px rgb(255,255,255)" }, 300);
});
Using the animation plugin, I can simply animate the box shadow from the default css to the values in the first animate call in 300 milliseconds and then when this is finished, it will call the inner function which will call animate again to take the values back to their defaults. Naturally you can modify the way these work and the timings. Also, you could use a Javascript timer if you want to keep triggering the animation. You must have a value in your CSS by default in order to animate it, you cannot animate from "null" to some value!
Have a play and see what you can do with it, it's pretty straightforward thanks to jQuery!