Schnee fallen lassen ♥

Ich bin zwar kein großer Fan von realem Schnee, aber virtuell finde ich es doch sehr schön. Passend zur Zeit und aufgrund einiger Nachfrage, habe ich mich auf die Suche gemacht, wie man schönen Schnee in seinem Blog fallen lassen kann.

Da ich kein Javascript-Expertin bin und deshalb auch keine Javascript-Codes bastel, habe ich Google gefragt. Nach ein bisschen Suche fand ich in einem Forum jemanden, der wirklich schönen Schnee für die Homepage gebastelt hat. Hier könnt ihr seine Version nachlesen, gegebenenfalls ein .js-Datei erstellen, sie auf eurem Webspace hochladen und hier einbinden.

Kein Ahnung, worüber ich gerade gesprochen habe? Dann mach es einfach so:

1. Öffnet unter Layout ein neues Gadget für HTML/Javascript.

2. Kopiert folgendes rein.

<script language="JavaScript"> // Author: Yurij Gera // TODO: make @media print... work for Mozilla and Opera var SnowCount = exAutoCalculate(); var SnowMinSize = 12; // Minimum Snow-Font Size [Pixel] var SnowMaxSize = 28; // Maximum Snow-Font Size [Pixel] var SnowMinYSpeed = 0.5; // Maximum Y Speed [Pixel/Frame] var SnowMaxYSpeed = 2.5; // Maximum Y Speed [Pixel/Frame] var SnowMinXSpeed = 0.05; // Minumum Radial Speed [Radian/Frame] var SnowMaxXSpeed = 0.15; // Maximum Radial Speed [Radian/Frame] var SnowMinXDelta = 10; // Minimum X Delta [Pixel] var SnowMaxXDelta = 20; // Maximum X Delta [Pixel] var SnowMoveDelay = 25; // Delay [Milliseconds] var SnowColors = ['#BBBBBB', '#DDDDDD', '#FFFFFF', '#BBBBFF']; // Snow Colors [Array] exSnowInit(); function exSnowInit() { SnowMoveDelay = 25; // Delay [Milliseconds] exAddEvent(window, 'load', exSnowStart); exAddEvent(window, 'resize', exSnowRefresh); document.createStyleSheet().cssText = "@media print {.exSnowClass { DISPLAY: none; }}"; // IE only } function exAutoCalculate() { var start = new Date(); for (var i = 0; i < 50000; i++) { Math.random(); } var end = new Date(); var delta = end.valueOf() - start.valueOf(); var EstimatedSnowCount = Math.min(Math.floor(10000 / delta), 500); if (navigator.userAgent.match(/Opera/)) EstimatedSnowCount *= 0.5; // Hot fix opera return EstimatedSnowCount; } function exRandom(Min, Max, Natural) { if (typeof Natural == 'undefined') Natural = false; if (Natural) { return Math.floor(Min + (Max - Min + 0.999999) * Math.random()); } else return Min + (Max - Min) * Math.random(); } function exSnowStart() { Snow = new Array(); for (i = 0; i < SnowCount; i++) { var e = document.createElement("span"); e.className = 'exSnowClass'; e.style.fontFamily = 'Times'; e.style.fontSize = (SnowMinSize + Math.floor((SnowMaxSize - SnowMinSize) * Math.random())) + 'px'; e.style.color = SnowColors[exRandom(0, SnowColors.length-1, true)]; e.style.cursor = 'default'; e.style.position = 'absolute'; e.onselectstart = function () { return false; }; var t = document.createTextNode("*"); e.appendChild(t); Snow[i] = document.body.appendChild(e); } exSnowRefresh(); exSnowMove(); } function exSnowRefresh() { SnowBoxWidth = document.body.clientWidth; SnowBoxHeight = document.body.clientHeight; for (i = 0; i < Snow.length; i++) { var e = Snow[i]; e.YSpeed = exRandom(SnowMinYSpeed, SnowMaxYSpeed); e.XSpeed = exRandom(SnowMinXSpeed, SnowMaxXSpeed); e.XMaxDelta = exRandom(SnowMinXDelta, SnowMaxXDelta); e.XDelta = Math.PI * Math.random(); // Stored Radial Delta (Radian) e.X = exRandom(SnowMaxXDelta, SnowBoxWidth - SnowMaxXDelta - SnowMaxSize); e.Y = exRandom(0, SnowBoxHeight - SnowMaxSize); e.style.left = e.X + 'px'; e.style.top = e.Y + 'px'; } } function exSnowMove() { for (i = 0; i < Snow.length; i++) { with (Snow[i]) { Y = (Y + YSpeed < SnowBoxHeight - SnowMaxSize) ? Y + YSpeed : 0; XDelta += XSpeed; style.left = X + Math.sin(XDelta) * XMaxDelta + 'px'; style.top = Y + 'px'; } } setTimeout("exSnowMove()", SnowMoveDelay); } function exAddEvent(o, e, f) { if (typeof o.addEventListener != 'undefined') o.addEventListener(e, f, false); else if (typeof o.attachEvent != 'undefined') o.attachEvent("on" + e, f); else return false; return true; }</script>

3. Ändert die obere Passage ab, bis euch die Schneeflocken gefallen.

var SnowMinSize   = 12;   // Minimum Snow-Font Size [Pixel]

var SnowMaxSize   = 28;   // Maximum Snow-Font Size [Pixel]

var SnowMinYSpeed = 0.5;  // Maximum Y Speed [Pixel/Frame]

var SnowMaxYSpeed = 2.5;  // Maximum Y Speed [Pixel/Frame]

var SnowMinXSpeed = 0.05; // Minumum Radial Speed [Radian/Frame]

var SnowMaxXSpeed = 0.15; // Maximum Radial Speed [Radian/Frame]

var SnowMinXDelta = 10;   // Minimum X Delta [Pixel]

var SnowMaxXDelta = 20;   // Maximum X Delta [Pixel]

var SnowMoveDelay = 25;   // Delay [Milliseconds]

var SnowColors    = ['#BBBBBB', '#DDDDDD', '#FFFFFF', '#BBBBFF']; // Snow Colors [Array]

(letzteres sind Farben, hier könnt ihr sie bestimmen und einfügen)

4. Speichert es ab und schon seid ihr fertig! War doch nur halb so schlimm, oder?

Viel Spaß mit dem Schnee auf eurer Seite, übertreibt es nicht und habt einen schönen Dezember (bitte ohne echtem Schnee) ♥