SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Procrastinator Extraordinaire lucas's Avatar
    Join Date
    Oct 2000
    Location
    Springfield, Missouri, U.S.A.
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    snow flake dhtml script, how do i limit its scope on the page?

    hey, i'm getting into the xmas spirit and want to put a snowflake script on my page, however to keep it from being annoying i want to limit it to the top part of the screen. below is the code, anyone have an idea how to do this?


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <HTML>
    
    <HEAD>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
    	<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
    	<TITLE>untitled</TITLE>
    </HEAD>
    
    <BODY>
    
    <P><SCRIPT language="JavaScript1.2">
    
    /*
    Snow Effect Script
    Submitted by Altan d.o.o. (snow@altan.hr, http://www.altan.hr/snow/index.html)
    Permission granted to Dynamicdrive.com to feature script in archive
    For full source code to this script, visit http://dynamicdrive.com
    */
      
    
      //Configure below to change URL path to the snow image
      var snowsrc="snow.gif"
      // Configure below to change number of snow to render
      var no = 15;
    
      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 = 150;
      
      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>
    
    </BODY>
    
    </HTML>

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    Michigan, USA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to restrict the height, first find this line:
    Code:
    var i, doc_width = 800, doc_height = 150;
    [list=1][*]Change the "doc_height = xxx" part to be whatever height in pixels you want it to cover.[*]Then find all of the other places where that variable gets updated (there are four), and comment or remove those lines.[*]One last thing, the original stops drawing the flakes at "doc_height-50". If you want it to cover the full area you speicified above, replace all of the "doc_height-50" occurences to just "doc_height". Or just add 50 to the value you assigned to doc_height at the top. [/list=1]
    The changes to restrict width are the same, just replace "doc_height" in the instructions above to "doc_width".

    Hope this helps!

    P.S. Great find - I've been looking for a good snow script. This one's a great starting point for doing what I want to do. I've had fun playing with it already! Thanks!
    Dave

  3. #3
    Procrastinator Extraordinaire lucas's Avatar
    Join Date
    Oct 2000
    Location
    Springfield, Missouri, U.S.A.
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot. btw, you might want to use it sparingly, because i discovered that it uses 85% of my cpu cycles, a little bit to much for a webpage...

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    Michigan, USA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. Is that with the default of 15 images? Yeah, I could see it taking a toll on the CPU. Plus it's a good idea not to overdo it because people will get sick of it quick. If I find a way to tune it up I'll let you know.
    Dave

  5. #5
    Procrastinator Extraordinaire lucas's Avatar
    Join Date
    Oct 2000
    Location
    Springfield, Missouri, U.S.A.
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, there are the stats, with 10 snowflakes on a 1 ghz machine it used 15%, on a 450 mhz, it used 85%, and on a 300 mhz celeron is used 100%. wish i could use it, but i can't put that kind of load on my surfers computers.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    Michigan, USA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the code is pretty busy. It does a lot of fancy things that are probably unnecessary. I want to create one that's not so intense, where the flakes just basically fall straight down (or at a given angle), at a constant rate. That's more like rain, but you could use a white dot or a snowflake or whatever. I guess the effect would be something like this one:
    http://www.dynamicdrive.com/dynamicindex3/rain.htm but with support for IE and NS like the one you posted. I like the way that the rain/snow one uses a character instead of a graphic as well, that might be easier on the client.
    Dave


Bookmarks

Posting Permissions

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