If you're using canvas, I would look into radial gradient and just animate its radius. Here's a simple example of a glowing dot — http://kangax.github.com/jstests/dynamic-glow-effect-with-canvas/ Using non-linear easing for transition should give it more realism.
-- kangax On Mon, Feb 14, 2011 at 5:45 AM, Mark McDonnell <[email protected]>wrote: > Thanks Björn > > Ps, apologies if this thread has gone off topic, obviously this was > accidental as I had originally thought this might be possible via Canvas. > > Kind regards, > Mark > > 2011/2/14 Björn Söderqvist <[email protected]> > >> OK, this is maybe getting a bit off topic since we are moving away >> from JS-land. >> You could obviously remove the :focus pseudo-class in the selector to >> make it show "always". >> Other than that, check this page out [1] for more examples on how to >> do animations and pulsation in CSS3 and maybe the concept will be more >> clear to you. Also it might help to try and play around a bit with the >> different examples. >> >> [1] http://webkit.org/blog/324/css-animation-2/ >> >> I should note that the crossbrowser support for this is varying as well >> :-) >> >> Good luck. >> /B. >> >> On Mon, Feb 14, 2011 at 11:20 AM, Mark McDonnell <[email protected]> >> wrote: >> > Hi Björn, >> > Sorry, just to be clear that what I need is a pulsating effect (so the >> dots >> > have no glow effect, then they start to glow and then the glow slowly >> fades >> > out again, then back in/out over and over...) >> > The article you linked to was fine for animating a glow effect when the >> user >> > triggers a focus/blur event on the element, but the dots I need to make >> glow >> > on/off needs to be automated - so no user interaction (same as doing a >> Glow >> > filter motion tween in Flash basically but with JavaScript). >> > I don't know if CSS3 transitions can do this (start another animation >> once >> > the previous one has finished)? If they can then that's great! and would >> > love a link to some more information on how to achieve that with CSS3. >> > Thanks Björn. >> > Kind regards, >> > Mark >> > >> > 2011/2/14 Björn Söderqvist <[email protected]> >> >> >> >> Firstly, yes I suggest CSS3 transitions over canvas. >> >> >> >> But then I am not completely sure what you are asking. >> >> If you are talking about a pulsating effect then it's possible to do >> >> animations using CSS3 transitions. That's also a part of the example >> >> in the page I posted. No Javascript needed. >> >> If you want to be able to toggle the glow on or off, you can have it >> >> belong to a CSS class which you add/remove with JS. >> >> >> >> Cheers, >> >> Björn >> >> >> >> On Mon, Feb 14, 2011 at 10:37 AM, Mark McDonnell <[email protected] >> > >> >> wrote: >> >> > Hi Björn, >> >> > Thanks for the reply. >> >> > So just to clarify, that you suggest using CSS3 transitions instead >> of >> >> > Canvas. >> >> > I need these 'glowing dots' to be glowing on/off which I then assume >> >> > means I >> >> > would need to use Js to change the relevant CSS3 transition style >> over >> >> > time >> >> > at set intervals - is that possible? I know that Js can change >> standard >> >> > CSS >> >> > properties but I wasn't sure about vendor specific prefixes. >> >> > Lastly, is this not possible to do with just Canvas? >> >> > Kind regards, >> >> > Mark >> >> > 2011/2/14 Björn Söderqvist <[email protected]> >> >> >> >> >> >> Both the DOM and SVG are stylable with CSS3 where you can accomplish >> >> >> the glow effect: >> >> >> >> >> >> >> http://blog.gesteves.com/post/475773360/css-glow-effects-with-box-shadow >> >> >> >> >> >> On Sun, Feb 13, 2011 at 11:00 PM, Mark McDonnell < >> [email protected]> >> >> >> wrote: >> >> >> > Hi, >> >> >> > I'm completely new to the Canvas API and so my first stop to find >> out >> >> >> > more >> >> >> > about it was here: https://developer.mozilla.org/en/HTML/canvas >> >> >> > I've gone through some of the basics of drawing objects >> (rectangles >> >> >> > and >> >> >> > circles etc) and am starting to look into integrating images, but >> >> >> > what I >> >> >> > want to find out (before wasting too much time on learning Canvas) >> is >> >> >> > whether it's good for animating filters such as 'glow' effects? >> >> >> > Basically I've been asked by my boss to dynamically draw some >> circles >> >> >> > on >> >> >> > top >> >> >> > of an image and to have these circles show 'glowing' edges. But >> I've >> >> >> > no >> >> >> > idea >> >> >> > how to achieve this. >> >> >> > I know there is SVG (with Raphael.js) as a nice abstraction for >> the >> >> >> > language >> >> >> > - and it maybe that SVG is what I should be using - let me know if >> so >> >> >> > and >> >> >> > I'll start investigating that instead. >> >> >> > Just need some advice on whether Canvas can do what my boss has >> >> >> > requested, >> >> >> > and if not, what other JavaScript based solutions (e.g. SVG) are >> >> >> > there >> >> >> > to >> >> >> > achieve this? >> >> >> > Many thanks. >> >> >> > Kind regards, >> >> >> > -- >> >> >> > Mark McDonnell >> >> >> > >> >> >> > -- >> >> >> > To view archived discussions from the original JSMentors Mailman >> >> >> > list: >> >> >> > http://www.mail-archive.com/[email protected]/ >> >> >> > >> >> >> > To search via a non-Google archive, visit here: >> >> >> > http://www.mail-archive.com/[email protected]/ >> >> >> > >> >> >> > To unsubscribe from this group, send email to >> >> >> > [email protected] >> >> >> > >> >> >> >> >> >> -- >> >> >> To view archived discussions from the original JSMentors Mailman >> list: >> >> >> http://www.mail-archive.com/[email protected]/ >> >> >> >> >> >> To search via a non-Google archive, visit here: >> >> >> http://www.mail-archive.com/[email protected]/ >> >> >> >> >> >> To unsubscribe from this group, send email to >> >> >> [email protected] >> >> > >> >> > -- >> >> > To view archived discussions from the original JSMentors Mailman >> list: >> >> > http://www.mail-archive.com/[email protected]/ >> >> > >> >> > To search via a non-Google archive, visit here: >> >> > http://www.mail-archive.com/[email protected]/ >> >> > >> >> > To unsubscribe from this group, send email to >> >> > [email protected] >> >> > >> >> >> >> -- >> >> To view archived discussions from the original JSMentors Mailman list: >> >> http://www.mail-archive.com/[email protected]/ >> >> >> >> To search via a non-Google archive, visit here: >> >> http://www.mail-archive.com/[email protected]/ >> >> >> >> To unsubscribe from this group, send email to >> >> [email protected] >> > >> > -- >> > To view archived discussions from the original JSMentors Mailman list: >> > http://www.mail-archive.com/[email protected]/ >> > >> > To search via a non-Google archive, visit here: >> > http://www.mail-archive.com/[email protected]/ >> > >> > To unsubscribe from this group, send email to >> > [email protected] >> > >> >> -- >> To view archived discussions from the original JSMentors Mailman list: >> http://www.mail-archive.com/[email protected]/ >> >> To search via a non-Google archive, visit here: >> http://www.mail-archive.com/[email protected]/ >> >> To unsubscribe from this group, send email to >> [email protected] >> > > -- > To view archived discussions from the original JSMentors Mailman list: > http://www.mail-archive.com/[email protected]/ > > To search via a non-Google archive, visit here: > http://www.mail-archive.com/[email protected]/ > > To unsubscribe from this group, send email to > [email protected] > -- To view archived discussions from the original JSMentors Mailman list: http://www.mail-archive.com/[email protected]/ To search via a non-Google archive, visit here: http://www.mail-archive.com/[email protected]/ To unsubscribe from this group, send email to [email protected]
