topical media & game development

talk show tell print

graphic-javascript-effect-random-rain-effect.htm / htm



  
  <!-- ONE STEP TO INSTALL RAIN:
  
    1.  Copy the coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the BODY of your HTML document  -->
  
  <BODY>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Matthew Musgrove ( muskrat@lvnworth.com) -->
  <!-- Web Site:  http://free.prohosting.com/~musgrove -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Begin
  var no = 50;
  var speed = 1;
  var ns4up = (document.layers) ? 1 : 0;
  var ie4up = (document.all) ? 1 : 0;
  var s, x, y, sn, cs;
  var a, r, cx, cy;
  var i, doc_width = 800, doc_height = 600;
  if (ns4up) {
  doc_width = self.innerWidth;
  doc_height = self.innerHeight;
  }
  else
  if (ie4up) {
  doc_width = document.body.clientWidth;
  doc_height = document.body.clientHeight;
  }
  x = new Array();
  y = new Array();
  r = new Array();
  cx = new Array();
  cy = new Array();
  s = 8;
  for (i = 0; i < no; ++ i) {  
  initRain();
  if (ns4up) {
  if (i == 0) {
  document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
  document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
  document.write(",</font></layer>");
  }
  else {
  document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
  document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
  document.write(",</font></layer>");
     }
  }
  else 
  if (ie4up) {
  if (i == 0) {
  document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
  document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
  document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
  document.write(",</font></div>");
  }
  else {
  document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
  document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
  document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
  document.write(",</font></div>");
        }
     }
  }
  function initRain() {
  a = 6;
  r[i] = 1;
  sn = Math.sin(a);
  cs = Math.cos(a);
  cx[i] = Math.random() * doc_width + 1;
  cy[i] = Math.random() * doc_height + 1;
  x[i] = r[i] * sn + cx[i];
  y[i] = cy[i];
  }
  function makeRain() {
  r[i] = 1;
  cx[i] = Math.random() * doc_width + 1;
  cy[i] = 1;
  x[i] = r[i] * sn + cx[i];
  y[i] = r[i] * cs + cy[i];
  }
  function updateRain() {
  r[i] += s;
  x[i] = r[i] * sn + cx[i];
  y[i] = r[i] * cs + cy[i];
  }
  function raindropNS() {
  for (i = 0; i < no; ++ i) {
  updateRain();
  if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
  makeRain();
  doc_width = self.innerWidth;
  doc_height = self.innerHeight;
  }
  document.layers["dot"+i].top = y[i];
  document.layers["dot"+i].left = x[i];
  }
  setTimeout("raindropNS()", speed);
  }
  function raindropIE() {
  for (i = 0; i < no; ++ i) {
  updateRain();
  if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
  makeRain();
  doc_width = document.body.clientWidth;
  doc_height = document.body.clientHeight;
  }
  document.all["dot"+i].style.pixelTop = y[i];
  document.all["dot"+i].style.pixelLeft = x[i];
  }
  setTimeout("raindropIE()", speed);
  }
  if (ns4up) {
  raindropNS();
  }
  else
  if (ie4up) {
  raindropIE();
  }
  //  End -->
  </script>
  
  <p><center>
  <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  3.14 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.