Winter: Schneeflocken

Scripte > Attachment

Schneeflocken für winterliche Atmosphäre

Ein Script für die winterliche Atmosphäre und Schneeflocken produziert. So kann eine Webseite auch winterlich gestaltet werden, ohne dies aufdringlich wirken zu lassen.

Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Script auf mehreren Seiten eingesetzt werden, empfiehlt sich die Variante per <script>....</script> um Änderungen nur in einer Datei durchführen zu müssen.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und HTML-Code in den BODY-Bereich <body>.....</body> an beliebiger Stelle der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

Zusätzlich liegt dem Paket ein Ordner "img" mit 20 verschiedenen Schneeflocken-Typen (flakes_01.gif bis flakes_20.gif) bei.

x runter geladen

Fallgeschwindigkeit, Flockenanzahl und vieles mehr lassen sich im Code der Datei "index.js" einstellen:

round: true, // Flockenform (rund=true, eckig=false)

shadow: false, // Flockenschatten (ja=true, nein=false)

flakePosition: 'fixed', // Positionierung (sollte so bleiben)

flakeIndex: 999999, // Fallebene (sollte so bleiben)

flakeCount: 10, // Flockenmenge (Anzahl)

minSize: 5 * 2, // Flockengröße kleine Flocken (5*2=10)

maxSize: 10 * 2, // Flockengröße grosse Flocken (10*2=20)

minSpeed: 2, // Fallgeschwindigkeit Minimum

maxSpeed: 4, // Fallgeschwindigkeit Maximum

image: "wsX5Obj/Obj75_0/img/flake_03.gif" // Flockenauswahl

Das Start- und Enddatum für die Automatisierung des Flockenfalls werden ebenfalls in der Datei "index.js" festgelegt:

var start = date(10, 8); // Snowstart: date(Monat, Tag)

var end = date(1, 6); // Snowende: date(Monat, Tag)

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

alternative Einbindung:

if(isEnabled()){
var obj = document.createElement('div');
obj.style.position = 'fixed';
obj.style.left = '0px';
obj.style.top = '0px';
obj.style.width = '100%';
obj.style.height = '100%';
obj.style.zIndex = 999999;
obj.style.pointerEvents = 'none';
document.body.insertBefore(obj, document.body.firstChild);
snowFall.snow(obj, {
// Einstellungen der Flocken

round: true,            // Flockenform (rund=true, eckig=false)
shadow: false,          // Flockenschatten (ja=true, nein=false)
flakePosition: 'fixed', // Positionierung (sollte so bleiben)
flakeIndex: 999999,     // Fallebene (sollte so bleiben)
flakeCount: 10,         // Flockenmenge (Anzahl)
minSize: 5 * 2,         // Flockengröße kleine Flocken (5*2=10)
maxSize: 10 * 2,        // Flockengröße grosse Flocken (10*2=20)
minSpeed: 2,            // Fallgeschwindigkeit Minimum
maxSpeed: 4,            // Fallgeschwindigkeit Maximum
image: "wsX5Obj/Obj75_0/img/flake_03.gif" // Flockenauswahl

});
}

function isEnabled(){

// Einstellungen Beginn und Ende
var start = date(10, 8); // Snowstart: date(Monat, Tag)
var end = date(1, 6); // Snowende: date(Monat, Tag)
var now = new Date();
var today = date(now.getMonth() + 1, now.getDate());
if(start.isBefore(end)) {

return start.isBefore(today) && today.isBefore(end);

} else {

return start.isBefore(today) || today.isBefore(end);

}
function date(month, day){

var obj = {

m : month,
d : day,
isBefore : function(date){

return this.m < date.m || (this.m === date.m && this.d <= date.d);

}

};
return obj;

}

</script>

Nach dem <BODY> Tag

» nach oben «