Winter: Schneeflocken - Website X5 Hilfe - Die Helpsite

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

Winter: Schneeflocken

Scripte > Attachment

Schneeflocken für winterliche Atmosphäre

Ein Script das Schneeflocken produziert. Auch unsere Homepage können wir ein wenig winterlich gestalten, ohne dies aufdringlich wirken zu lassen.
Hier sind 2 Varianten zur Einbindung erläutert. Sollte dieses Menü 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 jeweils 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" media="screen, print" />
<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>
Feedbacks zu ""
4 Kommentare
Durchschnittliche Bewertung: 140.0/5
Admin-Antwort
2018-11-12 10:19:35
Dann hast Du den Pfad zum Bild falsch gesetzt
2018-11-12 10:17:01
bekomme zwar den Schneefall hin, aber die Flocken sehen aus wie nicht verknüpfte Bilder. Bin irgendwie mit meinem Latein am Ende.
Anfängerin
2018-11-12 10:13:57
Ich kriegs irgendwie nicht richtig hin mit website x5 Evo. Das gab es doch auch mal mit Objekten (Blasen, Vögel) die aufstiegen, das suche ich :-)
Günni
2018-11-12 10:10:58
Danke. Es schneit! Allerdings nur auf meiner HP. Ansonsten blauer Himmel. Gruß
Vielen Dank für Dein Feedback.
Logo Host Europe
Button Spenden

© 2009 - 2019





Besucher Statistik
» 2 Online
» 89 Heute
» 221 Gestern
» 310 Woche
» 2310 Monat
» 137227 Jahr
» 464983 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Hosting by
Zurück zum Seiteninhalt