Snow Effects - Chute de neige de Noël en pur CSS, dates de saison, sans JavaScript

L'ambiance de la saison, sans la facture de performance qui va avec

Une chute de neige sur la boutique, c'est un petit détail, mais c'est ce genre de détail qui fait que décembre ressemble vraiment à décembre. Ce dont vous n'avez pas envie, c'est de la facture habituelle : une bibliothèque JavaScript, une police tirée du CDN de quelqu'un d'autre, du code qui s'exécute sur chaque page toute l'année, et un pense-bête pour tout couper en janvier. Ce module ne fait rien de tout cela. Il est en CSS, il gère son calendrier lui-même et il pèse environ un kilo-octet.

Deux thèmes

Classique, c'est de la neige blanche et rien d'autre. Le mélange de Noël disperse cloches, notes de musique, sapins, bonhommes de neige et cadeaux entre les flocons. Les ornements conservent leurs propres couleurs ; les flocons, eux, prennent la teinte que vous choisissez, avec une ombre douce pour que le blanc reste visible sur un thème clair.

Réglez la saison une fois, puis oubliez-la

Indiquez un premier et un dernier jour — du 1er décembre au 6 janvier, par exemple — et le module compare les dates à chaque visite. La neige apparaît toute seule et s'arrête toute seule. Laissez les dates vides et elle tombe simplement jusqu'à ce que vous la désactiviez. C'est le réglage qui évite les boutiques encore enneigées au mois de mars.

Réglable, mais bien calibré par défaut

• Intensité — calme, normal ou blizzard.
• Taille — de 0,5 à 5, par rapport à la taille du texte de votre thème, chaque flocon variant légèrement autour de cette valeur.
• Nombre — de 4 à 48 flocons à l'écran en même temps.
• Couleur — n'importe quelle couleur CSS valide.
• Afficher sur les téléphones — désactivez-le pour réserver la neige aux écrans de plus de 768 px.

Chaque champ est validé à l'enregistrement : les plages sont respectées, les dates doivent être valides et dans le bon ordre, les couleurs doivent être de vraies couleurs, et une taille saisie 1,5 avec une virgule décimale est acceptée plutôt que rejetée en silence. Une saisie incorrecte revient avec un message clair, et rien de ce que vous avez tapé n'est perdu.

Un mouvement qui paraît naturel

À chaque chargement de page, chaque flocon reçoit une position, une taille et un rythme aléatoires, et l'animation démarre en pleine chute : l'écran n'est jamais vide pendant les premières secondes et le motif ne se répète jamais de façon visible.

Respectueux par conception

La neige n'intercepte jamais les clics ni la sélection de texte : chaque couche utilise pointer-events: none, donc rien n'avale un appui sur un bouton mobile. Les visiteurs dont le système demande une animation réduite ne voient aucune neige — ce n'est pas un petit plus, c'est exactement ce dont les personnes sensibles au mouvement ont besoin.

Où l'effet s'affiche

Le balisage est injecté par le hook standard displayBeforeBodyClosingTag, présent dans tous les thèmes bâtis sur les gabarits par défaut de PrestaShop, et la feuille de style est enregistrée par actionFrontControllerSetMedia : elle rejoint ainsi le pipeline d'assets habituel et ne se charge que pendant la saison. Sur un thème très personnalisé, vous pouvez rattacher le module à un autre hook d'affichage depuis Design → Positions, ou le placer directement avec {widget name='snowflakesmeg'}. Il ne s'affiche qu'une seule fois par page, quel que soit le nombre de hooks ou d'appels widget auxquels il est rattaché.

Ce que la version 2.0 a corrigé

La version 1.x comptait six vrais problèmes ; ils ont tous disparu. Il neigeait deux fois sur PrestaShop 1.7, parce que la 1.x enregistrait à la fois displayHeader et son ancien alias header — deux couches de neige superposées sur chaque page. En mode Noël, des carrés vides apparaissaient dès qu'un CDN devenait injoignable, car les icônes festives provenaient d'une feuille de style Font Awesome hébergée sur un CDN tiers abandonné, chargée sur chaque page de la boutique et du back-office ; la 2.0 utilise des emoji et des glyphes texte natifs, et ne charge plus rien d'externe. Les flocons bloquaient les clics, surtout sur mobile. Une taille saisie avec une virgule décimale était rejetée sans la moindre explication. Le balisage de la neige était écrit à l'intérieur de <head>, laissant aux navigateurs le soin de réparer le document ; il se place désormais juste avant </body>. Et rien ne permettait de mettre fin à la saison — d'où les dates.

Compatibilité

PrestaShop 1.7, 8 et 9, en huit langues : allemand, anglais, espagnol, français, italien, néerlandais, polonais et turc. L'animation repose uniquement sur transform et reste donc sur le thread de composition du navigateur — aucun calcul de mise en page, aucune saccade, même à 48 flocons. Pas de table en base de données, pas d'override, aucune modification du cœur, et la désinstallation efface tous les réglages, y compris les résidus laissés par la 1.x, pour rendre votre boutique exactement telle qu'elle était.

Questions fréquentes

Est-ce que cela va ralentir ma boutique ?

Non. C'est une petite feuille de style et environ un kilo-octet de balisage, animés uniquement par transform, sans rien aller chercher sur un serveur externe.

Dois-je penser à désactiver la neige en janvier ?

Non — c'est précisément à cela que servent les dates de saison. Réglez le premier et le dernier jour une fois, et la neige démarre et s'arrête toute seule.

Le module a-t-il besoin de JavaScript ?

Pas du tout. Ni JavaScript, ni jQuery, ni fichiers ou polices externes, ce qui le rend aussi compatible GDPR, puisque rien n'est demandé à un serveur tiers.

La neige peut-elle bloquer mes boutons ?

Non. Chaque couche de neige utilise pointer-events: none : les clics et la sélection de texte passent directement au travers.

Puis-je la masquer sur mobile ?

Oui, un seul interrupteur réserve l'effet aux écrans de plus de 768 px.

Et les visiteurs sensibles au mouvement ?

Ils ne voient aucune neige. Le module respecte automatiquement le réglage système prefers-reduced-motion.

Mon thème est sur mesure et rien ne s'affiche, que faire ?

Rattachez le module à un autre hook d'affichage depuis Design → Positions, ou insérez {widget name='snowflakesmeg'} dans votre template. Il ne s'affichera toujours qu'une seule fois par page.