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]
