Animation neige JavaScript pour site web — personnalisable, prêt à intégrer.

Modes & options de l’effet Neige

• PRESETS

  Presets : démarrez en 1 clic

  P1 à P5 sont des “ambiances” prêtes à l’emploi. En cliquant sur un preset, la neige se règle automatiquement (type de flocon + densité + taille + transparence + vitesse + oscillation + vent).

  Ensuite, vous pouvez peaufiner votre propre ambiance via le lien « Réglages avancés » : ajustez les sliders à votre goût. Dès que vous modifiez un réglage, le preset se désactive automatiquement — il vous a juste servi de tremplin pour créer une variante unique, parfaite pour créer une atmosphère différente selon vos pages.

• REGLAGES AVANCES

  Chaque slider agit sur un paramètre de la neige. Faites glisser, regardez le résultat, ajustez jusqu’à obtenir la bonne ambiance.

  Densité : nombre de flocons à l’écran. Plus vous montez, plus le ciel se charge.

  Taille des flocons : petits flocons fins ou gros flocons bien visibles.

  Transparence : ajuste la discrétion des flocons. Plus c’est transparent, plus l’ambiance est légère ; plus c’est opaque, plus la neige s’impose.

  Vitesse de chute : lente et contemplative, ou rapide façon blizzard.

  Oscillation : amplitude du mouvement gauche / droite des flocons. Un peu pour un léger flottement, plus pour une neige très vivante.

  Vent : oriente virtuellement la météo de votre page : chute bien verticale au centre, ou neige poussée vers la gauche ou la droite pour un rendu plus dynamique.

• STYLE

  Choisissez le type de flocons : gros flocons ronds, cristaux plus fins, neige diffuse… à vous de régler l’ambiance visuelle.
• MODES

  Un mode = une ambiance. De la petite chute tranquille à la vraie tempête, vous choisissez la météo de votre page.

  Continu : une neige régulière qui tombe tant que la durée n’est pas terminée — c’est le “neige qui tombe” classique : propre, continu, sans surprise.

  Apparition douce (mode Premium) : la neige démarre en douceur, la densité monte progressivement jusqu’à 100 %, puis reste active pendant la durée choisie — idéal si vous voulez une “neige qui tombe” progressive, qui s’installe naturellement.

  Tempête (mode Premium) : une rafale dense, idéale pour marquer un temps fort — si vous cherchez une “neige qui tombe” plus intense, plus spectaculaire, c’est le mode le plus expressif.

• DURÉE

  La durée règle le temps pendant lequel l’effet reste actif une fois la neige “à plein régime”.

  Continu : durée totale pendant laquelle la neige tombe.

  Apparition douce : la durée commence seulement quand la densité a atteint 100 % (montée progressive, puis compte à rebours).

  Tempête : même principe : la tempête monte en puissance, puis la durée se lance quand l’écran est bien chargé en flocons.

• ZONE D’AFFICHAGE

  Vous choisissez où la neige apparaît.

  Pleine page : les flocons s’affichent partout, par-dessus la page.

  Et si besoin, vous pouvez faire des exceptions : laisser seulement quelques éléments importants au premier plan (menu, boutons, texte), ou même utiliser la neige comme un fond de page pour une ambiance plus discrète.

  Éléments à intégrer : la neige s’affiche seulement dans les blocs que vous choisissez (hero, encart promo…).

  Si vous choisissez Éléments à intégrer, vous pouvez aussi décider comment ça démarre :

  Visible : quand le bloc apparaît à l’écran.

  Au survol : quand le curseur passe sur le bloc.

  Au clic : quand on clique sur le bloc.

  Et pour chacun de ces déclenchements, vous pouvez activer l’option “Une seule fois” si vous voulez éviter que l’effet se relance en boucle.

  Comment activer ces options
• INTERACTIVITÉ

  Quelques options pour donner encore plus de vie à la neige et la lier aux actions du visiteur.

  Attraction : les particules semblent attirées par la présence du curseur/doigt du visiteur. Subtil, hypnotique.

  Bulles : un effet “dôme” autour du curseur : les flocons glissent et contournent le geste/curseur, effet “bulle” ultra smooth.

  Vent directionnel : une dynamique de mouvement orientée, pour donner une vraie sensation de vent.

  Traîner : une trace animée derrière le geste/curseur — effet stylé immédiat.

  Rayon d’action : règle la zone d’influence autour du curseur/doigt — plus vous l’augmentez, plus l’effet s’étend autour (ex. Bulles : bulle plus grande).

  Pop au clic

  À chaque clic, une salve de flocons apparaît instantanément — parfait pour ajouter du “wow” sur une action (bouton, validation, achat…).

  Nombre de flocons : règle l’intensité du Pop — plus vous montez, plus la salve est généreuse.

• EFFETS DE TEXTE

  Mettez en lumière l’essentiel : un module de texte animé par la neige pour faire ressortir un mot, un prénom, une promo ou le nom de votre marque.

  Les flocons viennent se concentrer sur votre texte, puis l’animation le révèle progressivement. L’œil est attiré naturellement sur le message.

  Ce module est autonome : il ne dépend pas des autres réglages du panneau.

  Vous retrouvez aussi “Style” et “Durée”, comme dans le panneau du dessus — mais ici, ces réglages s’appliquent uniquement à l’effet de texte. Le principe reste le même.

  Texte à afficher

  Vous avez 3 lignes : haut, milieu et bas.

  Chaque ligne accepte jusqu’à 12 caractères. Vous pouvez écrire ce que vous voulez : un mot, une promo courte, un prénom…

  Et vous pouvez choisir l’alignement : gauche, centré ou droite.

  Prévisualisation

  Utilisez le bouton de prévisualisation pour tester l’effet immédiatement, et ajuster jusqu’à obtenir le rendu qui vous plaît.

• GESTIONNAIRE D'EFFETS (Premium)

  Gestionnaire d’effets (Premium)

  Le Gestionnaire d’effets permet de décider quand l’effet est autorisé à s’afficher et sur quels appareils. Idéal pour automatiser l’effet sans y repenser : vous configurez une fois, c’est réglé.

  Limite d’affichage

  Choisissez la fréquence d’apparition de l’effet :

  • Illimité : l’effet peut s’afficher à chaque chargement.
  • 1 fois / session (onglet) : l’effet s’affiche une seule fois par onglet ouvert.
    (Si vous rechargez la page dans le même onglet, il ne se relance pas.)
  • 1 fois / visiteur (ce navigateur) : l’effet s’affiche une seule fois pour ce visiteur sur ce navigateur.
    (Il ne se relancera pas tant que le stockage du navigateur n’est pas vidé.)

  Appareils

  Décidez sur quels écrans l’effet est autorisé :

  • Ordinateur
  • Mobile

  Activer la programmation

  Activez la programmation pour limiter l’effet à une période précise :

  • Démarrer le : date et heure de début.
  • Arrêter le : date et heure de fin.

  Astuce : parfait pour les promos, les fêtes, ou un décor saisonnier (sans penser à l’activer / le désactiver à la main).

• Meilleur endroit où copier le code

  Ici, on parle du meilleur endroit où placer votre bloc HTML dans la page (pas de comment copier le code dans un bloc HTML).

  L’effet Neige fonctionne quel que soit l’endroit où vous placez le code. Cependant, pour un rendu plus propre, il est conseillé de le mettre tout en bas de votre page. Votre site se charge normalement en premier, puis l’animation se lance juste après, comme une couche décorative qui vient se poser par-dessus votre contenu. C’est la manière la plus nette et la plus confortable d’afficher un effet visuel sur votre site.

• Comment activer les options d’affichage

  Ici, tout se joue avec la classe CSS de l’élément. Guide par CMS

  En clair : vous ne touchez pas au code. Vous allez juste dans les réglages de votre élément (bloc HTML) dans votre CMS, (bloc, hero, encart…) et vous modifiez le champ qui s’appelle souvent “Classe CSS” ou “CSS class”. C’est juste une petite étiquette que vous ajoutez à l’élément pour dire : “l’effet doit se mettre ici”.

  Règles simples :

  - Vous copiez/collez les mots comme ils sont.

  - Les mots sont séparés par des espaces.

  - Si votre élément a déjà une classe, vous la gardez et vous ajoutez celles-ci à la suite.

  Mode Pleine page (exceptions)

  Pour afficher un élément par-dessus l’effet, ajoutez dans sa classe CSS : over-effect

  Éléments à intégrer

  1) La base (obligatoire)

  Pour intégrer l’effet sur un élément, ajoutez toujours : effet-ici

  2) Choisissez comment ça se déclenche (optionnel)

  - Visible (par défaut) : effet-ici

  - Au survol : effet-ici effet-ici--hover

  - Au clic : effet-ici effet-ici--click

  3) Option “Une seule fois” (optionnel)

  Si vous voulez que l’effet ne se relance pas, ajoutez à la fin : effet-ici--once

  - Visible (par défaut) + Une seule fois : effet-ici effet-ici--once

  - Au survol + Une seule fois : effet-ici effet-ici--hover effet-ici--once

  Au clic + Une seule fois : effet-ici effet-ici--click effet-ici--once