DHTML - Fallender Schnee

... für ein winterliches Webdesign.

Schneefall mit JavaScript als Hintergrund - ist nur als DHTML-Lösung möglich. Die fallenden Schneeflocken bewegen sich dabei »zufällig« seitwärts, welches einem fallenden Schnee nahekommen soll. Die Schneeflockenbilder können jeweils eine gif-Datei sein.
Die Zahl der fallenden Schneeflocken ist fest.

Wie sich inzwischen herausgestellt hat, funktioniert dieses Script seit dem Internetexplorer Version 7 nicht mehr mit xhtml-standardkonformen Internetseiten wie dieser hier.
Der Wert document.body.clientHeight wird nicht richtig ausgelesen.

Läuft der IE 7 jedoch im »Quirk Mode«, funktioniert es. Eingeschaltet wird dieser mit einem Kommentar in der ersten Zeile der XHTML-Datei. Z.B. mit:

Nachfolgend der Quellcode:

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- <!-- Copyright: Andre Goentgen --> <!-- Begin var no = 15; // Anzahl der Bilder var xp, yp; // Koordination- und Positionsvariablen var i, doc_width = 800, doc_height = 600; var st, w; // Browseridentifizierung var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight-26; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight-26; } xp = new Array(); yp = new Array(); st = new Array(); pic = new Array(); // Bilderquellen pic[0]="s1.gif" pic[1]="s1.gif" pic[2]="s1.gif" pic[3]="s2.gif" pic[4]="s2.gif" pic[5]="s2.gif" pic[6]="s3.gif" pic[7]="s3.gif" pic[8]="s3.gif" pic[9]="s4.gif" pic[10]="s4.gif" pic[11]="s4.gif" pic[12]="s5.gif" pic[13]="s5.gif" pic[14]="s5.gif" // Sinkgeschwindigkeit st[0]=1 st[1]=1.1 st[2]=1.2 st[3]=2 st[4]=2.1 st[5]=2.2 st[6]=3 st[7]=3.1 st[8]=3.2 st[9]=4 st[10]=4.1 st[11]=4.2 st[12]=5 st[13]=5.1 st[14]=5.2 w = 3.14 / 360 * 2; //winkelfunktion for (i = 0; i < no; ++ i) { xp[i]=Math.random()(doc_width-35); yp[i]=Math.random()(doc_height-20); // Bereiche anlegen if (ns4up) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\"js/dhtml_snowfall2_" + pic[i] + "\" border=\"0\"><\/layer>"); } else if (ie4up) { document.write("<div id=\"dot"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><img src=\"js/dhtml_snowfall2_" + pic[i] + "\" border=\"0\"><\/div>"); } } // Animationsfunktion fuer Netscape function snowNS() { for (i = 0; i < no; ++ i) // Ein Schleifendurchlauf fuer jedes Objekt { yp[i] = yp[i] + st[i]; xp[i] = xp[i] + Math.sin(yp[i]w+st[i])2; if (yp[i] > doc_height) { xp[i]=Math.random()(doc_width-35); yp[i]=0; } document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i]; } setTimeout("snowNS()", 20); } // Animationsfunktion fuer Internet Explorer function snowIE() { for (i = 0; i < no; ++ i) // Ein Schleifendurchlauf fuer jedes Objekt { yp[i] = yp[i] + st[i]; xp[i] = xp[i] + Math.sin(yp[i]w+st[i])2; if (yp[i] > doc_height) { xp[i]=Math.random()(doc_width-35); yp[i]=0; } document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i]; } setTimeout("snowIE()", 20); } if (ns4up) {snowNS();} else if (ie4up) {snowIE();} // End --> //--> </script>

+ + + +

Ein weiteres Schneefallscript: dhtml_snowfall_e.html
Schneefall als Maus-Trailer ? Bei Interesse: dhtml_cursor_schneemaustrailer.html.