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]
