Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript twinkling star animation

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38774
    ethanmiller
    Participant

    I 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!

    #105361
    Paulie_D
    Member

    It 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?

    #105362
    ethanmiller
    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. ..

    #105365
    Paulie_D
    Member

    So…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

    #105398
    ethanmiller
    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…

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.