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]
