www.webdeveloper.com
Results 1 to 4 of 4

Thread: animated star background

Hybrid View

  1. #1
    Join Date
    Aug 2005
    Location
    Rhode Island
    Posts
    55

    Question animated star background

    i copied the code from javascript for the starfield background and it didn't show on my web page. i copied and pasted the code. + i had to add text to it.

    does anyone know where i could go to get a free animated star background that doesn't deal with a zip file?

    emrald

  2. #2
    Join Date
    Aug 2005
    Location
    A world ruled by deception
    Posts
    60
    You could make a simple star BG using ImageReady or a similar gif program.

    If not, heres a cool javascript I found though I do not know if it is the same one you are talking about.

    Code:
    <script language="JavaScript1.2">
      //Configure below to change URL path to the snow image
      var snowsrc="http://img122.echo.cx/img122/6407/star0oz.gif"
      // Configure below to change number of snow to render
      var no = 10;
    
      var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    
      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;
      
      if (ns4up||ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = document.body.clientWidth;
        doc_height = document.body.clientHeight;
      }
    
      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      
      for (i = 0; i < no; ++ i) {  
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;        // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();    // set step variables
        if (ns4up) {                      // set layers
          if (i == 0) {
            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/layer>");
          } else {
            document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"><\/layer>");
          }
        } else if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
          }
        }
      }
      
      function snowNS() {  // Netscape main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
            doc_width = self.innerWidth;
            doc_height = self.innerHeight;
          }
          dx[i] += stx[i];
          document.layers["dot"+i].top = yp[i];
          document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
        }
        setTimeout("snowNS()", 10);
      }
    
      function snowIE_NS6() {  // IE and NS6 main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
          yp[i] += sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02 + Math.random()/10;
            sty[i] = 0.7 + Math.random();
            doc_width = ns6up?window.innerWidth : document.body.clientWidth;
            doc_height = ns6up?window.innerHeight : document.body.clientHeight;
          }
          dx[i] += stx[i];
          if (ie4up){
    
          document.all["dot"+i].style.pixelTop = yp[i];
          document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
          }
          else if (ns6up){
          document.getElementById("dot"+i).style.top=yp[i];
          document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
          }  
        }
        setTimeout("snowIE_NS6()", 10);
      }
    
      if (ns4up) {
        snowNS();
      } else if (ie4up||ns6up) {
        snowIE_NS6();
      }
    
    </script>
    Last edited by e-realmz; 08-15-2005 at 02:16 AM. Reason: I had to change the word "one" to "javescript"

  3. #3
    Join Date
    Aug 2005
    Location
    Rhode Island
    Posts
    55
    One question....would that code go in head or in the body of the html??? i'm fairly new to all of this, but learning very quickly...

    thank you

  4. #4
    Join Date
    Aug 2005
    Location
    A world ruled by deception
    Posts
    60
    Paste it between the <head> tags.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles