Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Star twinkle effect

    Hi There

    I have a website and in the main image on the home page I would like parts of it to have a glittering star animation effect, using code not flash as I want to be able to view it on ios and mobiles.

    Thanks for any help

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,186
    Thanks
    15
    Thanked 253 Times in 253 Posts
    I do believe you will find a java applet that does that. Been around quite a long time.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,494 Times in 4,458 Posts
    But no reason you couldn't do it via JavaScript as well.

    Just need a few GIF of PNG images of "stars" at different brightness/color values and then cycle through them in various positions on the screen.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,494 Times in 4,458 Posts
    Here. Had to prove it. Almost trivial.
    http://plopon.com/stars.html

    There are 10 images, "star0.png" through "star9.png". Those represent 10 different brightnesses, from black to 4 pixels of white. Created with GIMP.

    You can control the density and the amount of twinkling quite easily. Here's the code being used on that page:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * { margin: 0px; }
    div#field {
        position: relative;
        height: 600px;
        width: 600px;
        background-color: black;
    }
    div#field img {
        position: absolute;
        height: 4px;
        width: 4px;
    }
    </style>
    <body>
    <div id="field"></div>
    
    <script type="text/javascript">
    var STARCOUNT = 300; // change to change density of stars
    var pix = [ ];
    var stars = [ ];
    var fld = document.getElementById("field");
    
    for ( var p = 0; p < 10; ++p )
    {
        var image = new Image();
        image.src = "star" + p + ".png";
        pix[p] = image;
    }
    
    for ( var s = 0; s < STARCOUNT; ++ s )
    {
        var x = Math.floor( Math.random() * 600 ); // 600 matches my <div> size...
        var y = Math.floor( Math.random() * 600 ); // ...adjust to match yours.
        var image = document.createElement("img");
        image.src = pix[s % 10].src;
        image.style.left = x + "px";
        image.style.top  = y + "px";
        stars.push(image);
        fld.appendChild(image);
    }
    
    function twinkle( )
    {
        for ( var n = 1; n <= 40; ++n ) // change 40 stars every time twinkle is called
        {
            var s = Math.floor( Math.random() * STARCOUNT );
            var image = stars[s];
            var p = Math.floor( Math.random() * 10 );
            image.src = pix[p].src;
        }
    } 
    setInterval( twinkle, 50 ); // 50 milliseconds seems reasonable
    </script>
    </body>
    </html>
    You can play with the numbers, esp. STARCOUNT and the 40 stars per twinkle.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •