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. Das Schneebild kann eine gif-Datei sein.
Der Schneefall scrollt nun mit, wenn auf den Scrollbalken geklickt werden muss um weitere Teile der Seite zu sehen zu bekommen.
Die Zahl der fallenden Schneeflocken ist entweder variabel nach der Fenstergröße oder fest einstellbar und in der Variablen anzahlF gespeichert. Bei dieser ist je nach Bedarf die Zeilenmarkierung für einen Kommentar zu setzen bzw. zu entfernen. Die Standardeinstellung verwendet die Bildschirmgröße als Mass für die Schneeflockenzahl.

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 ohne Kommentare:

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- /* 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 / var snowsrc="dhtml_snowfall.gif" var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var ns6up = (document.getElementById&&!document.all) ? 1 : 0; var dx, xp, yp; var am, stx, sty; 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; } var anzahlF // abhaengig von angezeigter Bildschirmgroesse: anzahlF = doc_widthdoc_height/10000 // alternativ: feste Anzahl // anzahlF = 100 var no = anzahlF 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; xp[i] = Math.random()(doc_width-50); yp[i] = Math.random()doc_height; am[i] = Math.random()20; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); if (ns4up) { 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() { for (i = 0; i < no; ++ i) { 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() { hscrll = (document.layers) ? window.pageYOffset : document.body.scrollTop; wscrll = (document.layers) ? window.pageXOffset : document.body.scrollLeft; for (i = 0; i < no; ++ i) { 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]+hscrll; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]Math.sin(dx[i])+wscrll; } else if (ns6up) { document.getElementById("dot"+i).style.top=yp[i]+hscrll; document.getElementById("dot"+i).style.left=xp[i] + am[i]Math.sin(dx[i])+wscrll; } } setTimeout("snowIE_NS6()", 10); } if (ns4up) { snowNS(); } else if (ie4up\|\|ns6up) { snowIE_NS6(); } //--> </script>

Übrigens: Eine der Schneeflocken ist ein Link.

Um dieses JavaScript als Hintergrund nutzen zu können, muss der Seiteninhalt in den Vordergrund »gezwungen« werden. Dies ist z.B. möglich durch ein Einschließen des gesamten Seiteninhaltes in ein div-Modul: <div style="z-index:1000;"><-- Seiteninhalt im Vordergrund //--></div>. Die Zahl des z-index: gibt die Position der Ebene an - je höher, desto weiter im Vordergrund.

Schneefall als Maus-Trailer ? Bei Interesse: dhtml_cursor_schneemaustrailer.html.