Grow your CSS skills. Land your dream job.

twinkling star animation

  • # July 4, 2012 at 6:14 am

    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!

    # July 4, 2012 at 6:33 am

    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?

    # July 4, 2012 at 7:14 am

    @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

    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

    # July 5, 2012 at 5:45 am

    @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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".