Snow Fall
Flocons Unicode animés en CSS pur tombent dans un ciel de nuit ; le JS recycle chaque floc via animationend pour un flux continu sans canvas.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque flocon est un div.snow2-flake contenant un caractère Unicode snowflake (❅, ✼, ❆…). La chute est entièrement portée par @keyframes snow2Fall : translateY(-20px) rotate(0deg) → translateY(300px) rotate(360deg) en linear infinite. Aucun requestAnimationFrame, aucun canvas — le moteur CSS du navigateur gère les frames sur le compositor thread.
createSnowflake() génère un élément avec des valeurs aléatoires : position left 0–100 %, font-size 10–24 px, opacity 0,4–1,0, animation-duration 4–8 s, animation-delay 0–2 s. Un listener animationend supprime le flocon terminé et en crée immédiatement un nouveau — flux continu, mémoire stable (un floc sort, un floc entre).
Le conteneur .snow2-container est positionné en position: absolute; inset: 0 avec un dégradé linéaire bleu nuit (#1e3a5f → #0f1c2e) et overflow: hidden qui coupe les flocons au bord. Un text-shadow rgba(255,255,255,.5) 0 0 5px sur chaque floc ajoute un halo lumineux adapté au fond sombre.
L'HTML embarque deux flocons pré-positionnés via style inline (durées et délais précalculés) pour éviter un écran vide au premier rendu, avant que le script ne prenne la main et ne remplisse le pool.
Accessibilité
- prefers-reduced-motion non géré : le code source ne contient aucune vérification de cette media query — l'animation CSS tourne inconditionnellement, y compris sur les systèmes réglés sur « réduire le mouvement ». À compenser manuellement :
@media (prefers-reduced-motion: reduce) { .snow2-flake { animation: none; } }. - Les
div.snow2-flakecontiennent du texte Unicode (❅, ✼…) sansaria-hidden="true": un lecteur d'écran peut les vocaliser au fil des créations dynamiques. Ajouteraria-hidden="true"sur.snow2-containerest fortement recommandé. - Le conteneur ne porte ni
roleniaria-label— son rôle purement décoratif est opaque pour les technologies d'assistance. - Les flocons portent
pointer-events: none: ils ne bloquent ni les clics ni la navigation clavier des éléments placés en overlay. - Contraste : le fond gradient bleu nuit offre un ratio > 7:1 pour du texte blanc (#ffffff sur #0f1c2e) — les flocons eux-mêmes sont décoratifs et ne transportent aucune information.
Compatibilité navigateur
Repose sur les animations CSS3 (@keyframes, animation) et l'événement animationend — disponibles dans tous les navigateurs modernes depuis 2014.
Si les animations CSS sont désactivées (mode économie d'énergie sur certains appareils), les deux flocons pré-seédés dans l'HTML restent visibles en position statique — le fond gradient bleu nuit s'affiche, aucune erreur JS n'est levée.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="snow2-container" id="snowContainer" aria-hidden="true">
<span class="snow-text">Flocons de neige</span>
<!-- Les div.snow2-flake sont injectés dynamiquement par le JS -->
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| tableau snowflakes (JS) | ['❅','✼','❆','❄'] | Jeu de caractères Unicode utilisés pour les flocons dans createSnowflake() — remplacez par n'importe quel caractère ou emoji hiver pour changer l'esthétique. |
| 10 + 14 * Math.random() (JS) | 10–24 px | Plage de taille des flocons dans createSnowflake() — réduisez à 8 + 8 * Math.random() pour une neige fine, montez à 14 + 20 * Math.random() pour de gros flocons. |
| 4 + 4 * Math.random() + "s" (JS) | 4–8 s | Durée d'animation dans createSnowflake() — augmentez pour une chute lente et romantique (7 + 5 * Math.random()), diminuez pour un blizzard nerveux (2 + 2 * Math.random()). |
| .4 + .6 * Math.random() (JS) | 0,4–1,0 | Plage d'opacité dans createSnowflake() — réduisez le max à .3 + .3 * Math.random() pour une neige semi-transparente discrète sur un fond image. |
| translateY(300px) — @keyframes snow2Fall (CSS) | 300 px | Distance de chute — à aligner sur la hauteur réelle du conteneur pour que les flocons sortent complètement par le bas avant d'être recyclés. |
| background — .snow2-container (CSS) | linear-gradient(#1e3a5f, #0f1c2e) | Dégradé du ciel — remplacez par transparent ou une image de paysage en background-image pour superposer l'effet à un hero existant. |
| color — .snow2-flake (CSS) | #fff | Couleur des flocons — essayez #b3d9f7 (bleu glacier) ou #e8f4ff (blanc cassé) pour un rendu plus naturel sur fond clair. |
FAQ
.snow2-container.translateY(300px) dans @keyframes snow2Fall pour correspondre à la hauteur de votre conteneur. Si celui-ci fait 500 px, utilisez translateY(520px) pour que les flocons sortent complètement par le bas avant d'être recyclés.@media (prefers-reduced-motion: reduce) { .snow2-flake { animation-play-state: paused; } } et en tête de createSnowflake() un guard if (matchMedia('(prefers-reduced-motion: reduce)').matches) return; pour couper la création dynamique.
