Winter: Schneeflocken - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.

Download Button
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)
Foto Garten
Foto Landschaft
Code für den <HEAD> Bereich
<link rel="stylesheet" href="wsX5Obj/Obj75_0/snow.css" />
<script src="wsX5Obj/Obj75_0/snow.js"></script>
Code für den <BODY> Bereich
<script src="wsX5Obj/Obj75_0/index.js"></script>

alternative Einbindung:
<script>
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 oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt