Home › Forums › JavaScript › twinkling star animation
- This topic is empty.
-
AuthorPosts
-
July 4, 2012 at 6:14 am #38774
ethanmiller
ParticipantI have a project where I need to make a few individual stars, in fixed locations, that will twinkle periodically. The way this should look exactly is not very precise, but the star is probably not so much needing to look realistic, as it needs to look like a star with little rays coming out. I’m wondering if there isn’t a way to do this programatically, with javascript/jquery, and perhaps the HTML5 canvas element, or perhaps webkit animation with CSS. I have had a couple of ideas, for example to have two or perhaps more divs with layered backgrounds with transparent elements rotating on top of each other in different directions, in a way that might generate a kind of twinkle with rays. Obviously, an easier way would be to use some animated star gifs if I can make one that looks right. In any case, there’s obviously many ways to go about this, especially because the right solution is so open-ended and dependent on how we want it to look, but I thought I’d ask here to see if any of you wise people have come across any good examples of code that does in any which way, or have any other suggestions about possible techniques… It’s an interesting challenge after all!
July 4, 2012 at 6:33 am #105361Paulie_D
MemberIt depends on where these stars will sit in the code.
Are they page backgrounds, elements in their own right (to sit on top of other items) or something else?
July 4, 2012 at 7:14 am #105362ethanmiller
Participant@Paulie_D: They are going to need to be elements in their own right. Their other property is that they need to be links, or clickable in any case. So not backgrounds. The metaphor the client is using is that they are like easter eggs because they will lead to more content. ..
July 4, 2012 at 7:57 am #105365Paulie_D
MemberSo…they need to be divs containing links
i suppose you could build in extra div inside the ‘wrapping’ divs and layer in backgrounds (with animations)..that might work quite well.
A quick and dirty mock-up: http://codepen.io/pen/8468/4
July 5, 2012 at 5:45 am #105398ethanmiller
Participant@Paulie_D thanks for that. It’s a possibility. It’s the twinkling effect that I think in the end will be hard to get at–either as a good-looking symbolic representation of a twinkle or something that attempts to artificially reproduce it…
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.