Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jQuery glowing animations : how to improve?

jQuery glowing animations : how to improve?

Problem

I've been making things glow with CSS and Jquery (simple CSS style change, see here), and now I wonder how to make these animations even better.

For the moment, I'm just making a transition between no Box Shadow and a box shadow, and that looks good. But I'm trying to find how to make it look even better, like if it was some sort of fog : basically, instead of having a fixed length of the box shadow, having it being longer here and shorter there (irregular shadow, so to speak).

Now I don't expect that to be possible with CSS3's box-shadow (but perhaps I'm wrong), so I wondered how to produce the effect I'm searching with jQuery. Is there a way to generate some layers with jQuery? Or perhaps creating a ghost text and using its text shadow?

I'm opened to various solutions here.

Thanks in advance!

Problem courtesy of: Gabriel Theron

Solution

First, it might be helpful to see what you have to compare if our suggestions are "better".

I will tell you that contrast is really your friend when it comes to glowing though. I wrote some quick examples here to show a few different ideas. I used text-shadow here for the glow and you can stack them up to change the glow (for example, see 3rd option). If you want it to "animate" you can put it on a setinterval to toggle between classes (see first option).

I'm using jquery and jquery UI for the class toggle, but there are other alternatives as well.

Demo: http://jsfiddle.net/mikecruz/zjbXa

Solution courtesy of: MikeCruz13

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

jQuery glowing animations : how to improve?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×