Snow Fall
15 ronds CSS en chute libre, 3 trajectoires de dérive distinctes, durées et délais décalés — atmosphère enneigée sans une ligne de JavaScript.
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
L'effet repose sur 3 séquences @keyframes qui simulent trois comportements de dérive : snowFall1 dérive de 20 px vers la droite (translateX(20px)), snowFall2 de 15 px vers la gauche (translateX(-15px)), snowFall3 oscille via un waypoint à 50 % (+10 px) avant de revenir à –10 px. Chaque flacon traverse 230 px de haut (translateY(-10px → 220px)) en tournant de ±360°. La fonction d'easing ease ralentit le départ et l'arrivée — les flocons glissent plutôt qu'ils ne tombent en ligne droite.
Les 15 flocons sont 15 <div> absolus avec border-radius: 50% — de simples cercles blancs. Chaque règle :nth-child(n) fixe individuellement la position horizontale (left de 5 % à 95 %), le diamètre (2 px à 5 px), la durée (6 s à 9,5 s), le délai (0 s à 3,2 s) et l'opacité (0,5 à 0,9). La combinaison de vitesses et de délais échelonnés crée une illusion de profondeur et de densité sans toucher au JavaScript.
Le .snow-container (position: absolute; inset: 0; overflow: hidden) porte un dégradé linéaire en 4 étapes — #2c3e50 → #3498db 40 % → #ecf0f1 95 % → #fff — qui évoque un ciel crépusculaire au-dessus d'un sol enneigé. Les flocons blancs restent lisibles sur fond bleu en haut, et se fondent naturellement dans la clarté du bas, imitant la neige qui touche le sol.
Il n'y a aucun JavaScript : pas de requestAnimationFrame, pas de canvas, pas de pool de particules. Toute l'animation est pilotée par le moteur CSS du navigateur — le coût en thread principal est nul. Le rendu délègue au compositeur GPU dès que seules les propriétés transform et opacity sont animées, garantissant 60 fps même sur mobile modeste.
Accessibilité
- prefers-reduced-motion absent : l'effet ne vérifie pas cette préférence OS — les animations tournent en boucle quelle que soit la configuration. Correctif :
@media (prefers-reduced-motion: reduce) { .snowflake { animation: none; } }. - Aucun attribut
aria-hiddenn'est posé sur.snow-containerni sur les 15<div class="snowflake">vides — un lecteur d'écran les parcourt inutilement. Ajoutezaria-hidden="true"sur le conteneur. - L'animation est
infinitesans mécanisme de pause : elle viole WCAG 2.2.2 pour les utilisateurs sensibles au mouvement. Prévoyez un bouton pause si l'affichage dépasse 5 secondes. - Le
.snow-labelest un<span>sans rôle ni niveau de titre — à remplacer par un élément sémantique adapté (<h2>,<p>) selon le contexte. - Aucune interaction clavier ou pointeur : l'effet est purement décoratif, ce qui est acceptable dès lors qu'il ne porte aucune information fonctionnelle.
Compatibilité navigateur
Repose sur CSS Animations Level 1 et les sélecteurs :nth-child — supportés dans tous les navigateurs modernes depuis 2013.
Sans support CSS Animations (IE 9 et antérieurs), les 15 flocons restent statiques en haut du conteneur — le fond dégradé s'affiche normalement, aucune erreur JS.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="demo-preview">
<div class="snow-container">
<div class="snowflake"></div>
<div class="snowflake"></div>
<div class="snowflake"></div>
<!-- × 15 total -->
</div>
<span class="snow-label">Snow Fall</span>
</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 |
|---|---|---|
| @keyframes snowFall1/2/3 — translateX | +20 px / –15 px / ±10 px | Amplitude de dérive latérale. Valeur positive = vers la droite (snowFall1), négative = vers la gauche (snowFall2). Augmentez à ±40 px pour simuler un vent fort. |
| .snowflake:nth-child(n) width / height | 2 px à 5 px | Diamètre de chaque flocon. Les flocons 5–8 px au premier plan renforcent la profondeur ; restez à 2–3 px pour les flocons lointains. |
| .snowflake:nth-child(n) animation-duration | 6 s à 9,5 s | Vitesse de chute individuelle. Réduisez à 3–5 s pour une tempête, augmentez à 12–18 s pour une neige légère. |
| .snowflake:nth-child(n) animation-delay | 0 s à 3,2 s | Décalage de démarrage : distribue les flocons sur la hauteur dès le chargement. Étendre jusqu'à 6 s pour espacer davantage la densité. |
| .snowflake:nth-child(n) opacity | 0,5 à 0,9 | Transparence par flocon. Les flocons lointains (petits) doivent avoir une opacité plus basse (0,3–0,5) pour conserver la profondeur. |
| .snow-container background | linear-gradient(#2c3e50 0, #3498db 40%, #ecf0f1 95%, #fff 100%) | Dégradé de fond du ciel. Changez les couleurs pour adapter à votre charte (nuit polaire, crépuscule, transparent pour superposition). |
| Nombre de .snowflake dans le HTML | 15 divs | Ajoutez ou supprimez des <div class="snowflake"> et créez les règles :nth-child(n) correspondantes. 8–10 = discret, 20–25 = blizzard dense. |
FAQ
background: #fff sur .snowflake par #a0c4e8 (bleu pâle) ou #90b4d0 pour les rendre visibles. Si votre fond est fourni par la page parente, passez .snow-container { background: transparent; } et déplacez votre propre dégradé sur l'élément parent.transform et opacity — les deux propriétés composées par le GPU sans déclencher de repaint ni de reflow. À 15 flocons, la charge GPU est négligeable même sur mobile. Si vous montez à 20+ flocons, restez sur ces deux propriétés uniquement pour maintenir 60 fps.animation-play-state. Ajoutez : .snow-paused .snowflake { animation-play-state: paused; } dans votre CSS, puis container.classList.toggle('snow-paused') depuis JS. Pour repartir depuis le début, retirez la classe puis remettez-la — le délai de chaque flocon se réinitialise.
