Snow Effects - Reiner CSS-Schneefall für Weihnachten mit Saisondaten, ganz ohne JavaScript

Saisonale Stimmung ohne saisonale Performance-Einbußen

Schneefall im Shop ist eine Kleinigkeit, die den Dezember nach Dezember aussehen lässt. Was Sie dafür nicht bezahlen wollen, ist der übliche Preis: eine JavaScript-Bibliothek, eine Schrift von einem fremden CDN, ein Skript, das das ganze Jahr über auf jeder Seite läuft, und eine Notiz im Kalender, das Ganze im Januar wieder abzuschalten. Dieses Modul macht nichts davon. Es ist CSS, es steuert seine Saison selbst, und es wiegt rund ein Kilobyte.

Zwei Themen

Klassischer Schneefall ist schlichter weißer Schnee. Die Weihnachtsmischung streut Glocken, Noten, Bäume, Schneemänner und Geschenke zwischen die Flocken. Die Ornamente behalten ihre eigenen Farben; die Schneezeichen nehmen die von Ihnen gewählte Farbe an — mit einem weichen Schatten, damit weiße Flocken auch auf einem hellen Theme sichtbar bleiben.

Saison einmal festlegen und vergessen

Geben Sie einen ersten und einen letzten Tag an — etwa 1. Dezember bis 6. Januar — und das Modul vergleicht die Daten bei jedem Besuch. Der Schnee erscheint von allein und hört von allein wieder auf. Lassen Sie die Felder leer, läuft er einfach, bis Sie ihn abschalten. Genau diese Einstellung verhindert, dass es im März immer noch schneit.

Anpassbar, aber von Haus aus stimmig

• Intensität — ruhig, normal oder Schneesturm.
• Größe — 0,5 bis 5, relativ zur Textgröße Ihres Themes, wobei jede Flocke leicht darum herum variiert.
• Anzahl — 4 bis 48 Flocken gleichzeitig auf dem Bildschirm.
• Farbe — jede gültige CSS-Farbe.
• Auf Smartphones anzeigen — ausschalten, um den Schnee auf Bildschirme breiter als 768 Pixel zu beschränken.

Jedes Feld wird beim Speichern geprüft: Wertebereiche werden eingehalten, Daten müssen gültig und in der richtigen Reihenfolge sein, Farben müssen echte Farben sein, und eine Größe wie 1,5 mit Dezimalkomma wird angenommen statt stillschweigend verworfen. Bei ungültigen Eingaben erscheint eine klare Meldung — und nichts von dem, was Sie eingetragen haben, geht verloren.

Bewegung, die natürlich wirkt

Jede Flocke bekommt bei jedem Seitenaufruf eine zufällige Position, Größe und Taktung, und die Animation setzt mitten im Fall ein — so ist der Bildschirm in den ersten Sekunden nie leer, und das Muster wiederholt sich nie sichtbar.

Rücksichtsvoll von Grund auf

Der Schnee fängt nie Klicks oder Textauswahl ab; jede Ebene nutzt pointer-events: none, sodass nichts einen Fingertipp auf einen Button verschluckt. Besucher, deren System reduzierte Bewegung anfordert, sehen überhaupt keinen Schnee — das ist keine nette Zugabe, sondern das, was bewegungsempfindliche Nutzer brauchen.

Wo der Schnee ausgegeben wird

Das Markup kommt über den Standard-Hook displayBeforeBodyClosingTag in die Seite, den jedes Theme auf Basis der PrestaShop-Standardlayouts mitbringt, und das Stylesheet wird über actionFrontControllerSetMedia registriert — es läuft also über die normale Asset-Pipeline und wird nur geladen, solange die Saison aktiv ist. Bei einem stark angepassten Theme können Sie das Modul unter Design → Positionen an einen anderen Anzeige-Hook hängen oder es direkt mit {widget name='snowflakesmeg'} platzieren. Ausgegeben wird es höchstens einmal pro Seite, egal an wie vielen Hooks oder Widget-Aufrufen es hängt.

Was Version 2.0 behoben hat

Version 1.x hatte sechs echte Probleme — alle erledigt. Auf PrestaShop 1.7 schneite es doppelt, weil 1.x sowohl displayHeader als auch den alten Alias header registrierte: zwei überlagerte Schneeebenen auf jeder Seite. Im Weihnachtsmodus erschienen leere Kästchen, sobald ein CDN nicht erreichbar war, denn die festlichen Icons stammten aus einem Stylesheet von Font Awesome auf einem abgekündigten Fremd-CDN, das auf jeder Seite des Shops und im Backoffice geladen wurde; 2.0 verwendet native Emoji und Textzeichen und lädt nichts Externes nach. Fallende Flocken blockierten Klicks, besonders auf Mobilgeräten. Eine mit Dezimalkomma eingetragene Größe wurde kommentarlos abgewiesen. Das Schnee-Markup wurde innerhalb von <head> ausgegeben, sodass die Browser das Dokument reparieren mussten; heute landet es direkt vor </body>. Und es gab keine Möglichkeit, die Saison zu beenden — daher die Datumsfelder.

Kompatibilität

PrestaShop 1.7, 8 und 9, in acht Sprachen: Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch. Die Animation läuft ausschließlich über transform und bleibt damit auf dem Compositor-Thread des Browsers — kein Layout-Aufwand, kein Ruckeln, selbst bei 48 Flocken. Es gibt keine Datenbanktabellen, keine Overrides und keine Änderungen am Core; die Deinstallation entfernt jede Einstellung inklusive der Altlasten aus 1.x und versetzt Ihren Shop exakt in den vorherigen Zustand zurück.

Häufige Fragen

Bremst es meinen Shop aus?

Nein. Es ist ein kleines Stylesheet und rund ein Kilobyte Markup, animiert allein über transform, ohne dass irgendetwas von einem externen Server geholt wird.

Muss ich daran denken, den Schnee im Januar abzuschalten?

Nein — genau dafür sind die Saisondaten da. Ersten und letzten Tag einmal festlegen, und der Schnee startet und stoppt von selbst.

Braucht das Modul JavaScript?

Überhaupt nicht. Kein JavaScript, kein jQuery, keine externen Dateien oder Schriften — das macht es zugleich GDPR-freundlich, da nichts von einem fremden Server angefordert wird.

Kann der Schnee meine Buttons blockieren?

Nein. Jede Schneeebene nutzt pointer-events: none, Klicks und Textauswahl gehen also ungehindert hindurch.

Kann ich ihn auf Mobilgeräten ausblenden?

Ja, ein Schalter beschränkt den Effekt auf Bildschirme breiter als 768 Pixel.

Und Besucher, die empfindlich auf Bewegung reagieren?

Die sehen keinen Schnee. Das Modul berücksichtigt die Systemeinstellung prefers-reduced-motion automatisch.

Mein Theme ist individuell und es passiert nichts — was jetzt?

Hängen Sie das Modul unter Design → Positionen an einen anderen Anzeige-Hook oder setzen Sie {widget name='snowflakesmeg'} direkt in Ihr Template. Ausgegeben wird es weiterhin nur einmal pro Seite.