Gobi's Schneefall

Auf dieser Seite sollte es schnein! Eiskalte Schneeflocken sollten von oben nach unten purzeln.

 Das Arrangement der Seite besteht aus drei Elementen:
o snow.htm  Webseite (HTML)
o snow.js  JavaScript-Modul
o snow.gif  Grafik

Ich habe das Arrangement unter Win98 mit vier verschiedenen Browsern erfolgreich getestet:

Browser Ergebnis
o Netscape 4.75  zufriedenstellend
o Netscape 6.1  zufriedenstellend
o Opera5  zufriedenstellend
o MSIE5  zufriedenstellend


Links - ein dankeschön an meine Informationsquellen

o SELFHTML - HTML-Seiten selber erstellen, Stefan Münz
o Snowcrystals - alles über Schnee-Kristalle, Kenneth G. Libbrecht
o The JavaScript Source - ergiebige Quelle für Javascripts, www.internet.com
The JavaScript Recource -> Snow - ursprüngliches Schnee-Skript


Sources - meine Quelldateien

snow.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Gobi's Schneefall</TITLE>
</HEAD>
<BODY TEXT="#DCDCDC" BGCOLOR="#000080">
<H1>Gobi's Schneefall</H1>
<P>
Auf dieser Seite sollte es schnein! Eiskalte Schneeflocken
sollten von oben nach unten purzeln.</P>
<SCRIPT SRC="snow.js" TYPE="text/javascript"></SCRIPT>
</BODY>
</HTML>
 
snow.js
var no = 25;                   // number of snowflakes
var speed = 10;                // the smaler, the faster snowflakes
var snowflake = "snow.gif";    // picture source
var ns4b = (document.layers) ? 1 : 0;   // Netscape4.x
var b4up = (document.all) ? 1 : 0;      // MSIE4, Opera5, Netccape5
var dx, xp, yp;                // coordinate and position variables
var am, stx, sty;              // amplitude and step variables
var snowobj;
var i, doc_width = 800, doc_height = 600; // 800x600 screen-default

if (ns4b) {
   doc_width  = self.innerWidth;
   doc_height = self.innerHeight;
} else if (b4up) {
   doc_width  = document.body.clientWidth;
   doc_height = document.body.clientHeight;
} else {
   doc_width = window.innerWidth;
   doc_height = window.innerHeight;
   b4up = 1;
}// if

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowobj = new Array();

for (i=0; i<no; ++i) {         // iterate for every snowflake
   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 (ns4b) {                           // set layers
      document.write("<LAYER NAME=\"flake"+ i +"\" LEFT=\"15\" "
      + "TOP=\"15\" VISIBILITY=\"show\"><IMG SRC=\""
      + snowflake +"\" BORDER=0></LAYER>");
   } else if (b4up) {
      document.write("<DIV ID=\"flake"+ i +"\" STYLE=\""
      + "position:absolute; z-index:"+ i +"; visibility:visible; "
      + "top:15px; left:15px;\"><IMG SRC=\""+ snowflake
      + "\" BORDER=0></DIV>");
      snowobj[i] = eval (document.getElementById("flake"+i).style);
   }//if
}//for

function snowNS() {            // Netscape4 main animation function
   for (i=0; i<no; ++i) {      // iterate for every snowflake
      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();
      }//if
         dx[i] += stx[i];
         document.layers["flake"+i].top = yp[i];
         document.layers["flake"+i].left = xp[i]
            + am[i]*Math.sin(dx[i]);
      }//for
   setTimeout("snowNS()", speed);
}//snowNS

function snowDocument() {      // MSIE4, Opera5, Netscape5 main
   for (i=0; i<no; ++i) {      // iterate for every flake
      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();
      }//if
      dx[i] += stx[i];
      snowobj[i].top  = yp[i];
      snowobj[i].left = xp[i] + am[i]*Math.sin(dx[i]);
   }//for
   setTimeout("snowDocument()", speed);
}//snowDocument

if (ns4b) {                   // Netscape4
   snowNS();
} else if (b4up) {            // MSIE4, Opera5, Netscape5
   snowDocument();
}//if
 
snow.gif
 
     
snow.gif

 


Wie lasse ich es schneien?

1. Den Inhalt der Datei "snow.htm" mit gedrückter linker Maustaste markieren
    Mit <Strg>+<C> markierten Text kopieren
    Mit <Strg>+<V> in eine Textdatei (Editor) kopieren
    Mit Datei -> Speichern unter... unter dem Namen "snow.htm" ins Zielverzeichnis speichern
2. Den Inhalt der Datei "snow.js" mit gedrückter linker Maustaste markieren
    Mit <Strg>+<C> markierten Text kopieren
    Mit <Strg>+<V> in eine Textdatei (Editor) kopieren
    Mit Datei -> Speichern unter... unter dem Namen "snow.js" ins Zielverzeichnis speichern
3. Die Datei "snow.gif" durch rechts klicken der animierten Schneeflocke mit
    Grafik speichern unter... unter dem Namen "snow.gif" ins Zielverzeichnis speichern
4. Mit einem Browser (Netscape, Opera, MSIE) die Datei "snow.htm" im Zielverzeichnis aufrufen
Es schneit...

Zum Einbinden in vorhandene Web-Seiten den Tag "<SCRIPT SRC="snow.js" TYPE="text/javascript"></SCRIPT>" einfügen
und die Dateien "snow.htm" und "snow.js" ins selbe Verzeichnis speichern

Alles zusammen in einem ZIP-Archiv.


Zu Gobi's Homepage | Impressum

Admin Mail: gobi@gmx.net Letzte Überarbeitung dieser Seite: Fr. 14. Dez. 2001 location: http://gobi.gmxhome.de/snow/