Animation Saint-Valentin JavaScript — pluie de cœurs et cœurs animés pour site web

Modes & options du panneau (Saint-Valentin)

• MODES

  Un mode = une ambiance. Du romantique discret au gros “waouh”, vous pilotez l’effet.

  Pluie : une pluie régulière de cœurs.

  Lâcher : déclenche une chute depuis le haut de l’écran, parfait pour un moment “surprise”.

  Explosion : idéal pour marquer une action (promo, ajout au panier, validation) : boom, puis fin.

  Mix : alternance intelligente entre lâcher et explosion : ça tombe, ça explose, et ça reste vivant.

• RÉGLAGES AVANCÉS

  Chaque slider agit sur un paramètre des cœurs. Vous ajustez, vous regardez, vous faites “oh wow”… puis vous ajustez encore.

  Densité : nombre de cœurs à l’écran. Plus vous montez, plus c’est “love storm”.

  Taille : petits cœurs discrets ou gros cœurs bien assumés.

  Transparence : léger et romantique… ou bien opaque et “je déclare ma flamme”.

  Vitesse : lente et élégante… ou pluie dynamique façon “coup de foudre”.

  Oscillation : amplitude du mouvement gauche / droite. Un peu pour flotter, plus pour danser.

• Palette

  Ici, la Palette correspond à la couleur des cœurs.

  Vous avez 4 couleurs disponibles. Vous pouvez en choisir une seule pour un rendu propre et homogène, ou activer Mix pour les mélanger.

  Mix : répartit les couleurs de façon variée (aléatoire) pour une pluie plus vivante, sans que vous ayez à bricoler quoi que ce soit.

• DURÉE

  Durée : règle le temps pendant lequel l’effet reste actif.

  Pluie : durée totale de la pluie de cœurs.

  Lâcher : durée de la pluie après le lâcher.

  Explosion : pas de durée (instantané).

  Mix : comme Lâcher, durée de la pluie derrière l’animation.

• ZONE D’AFFICHAGE

  Vous choisissez où l’effet apparaît.

  Pleine page : les cœurs s’affichent partout, par-dessus la page.

  Et si besoin, vous pouvez faire des exceptions : laisser certains éléments au premier plan (menu, boutons, texte), ou utiliser l’effet comme un fond pour une ambiance plus soft.

  Éléments à intégrer : les cœurs s’affichent 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 : lorsque l’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.

  Comment activer ces options
• INTERACTIVITÉ (Premium)

  Des mouvements qui donnent du caractère : plus de relief, plus d’énergie, et un vrai “wow”.

  Attraction : les cœurs semblent attirés par la présence du curseur/doigt du visiteur.

  Bulles : un effet “dôme” autour du curseur : les particules contournent le geste.

  Vent directionnel : une dynamique de mouvement orientée, pour une sensation de “brise”.

  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.

  Pop au clic

  À chaque clic, une salve de cœurs apparaît instantanément — parfait sur un bouton (promo, achat, inscription…).

  Nombre de cœurs : règle l’intensité du Pop.

• EFFETS DE TEXTE (Premium)

  Mettez en lumière l’essentiel : un texte bien placé + des cœurs bien dosés, et votre message devient impossible à ignorer.

  Les particules viennent se coller au texte, puis le mot se révèle petit à petit, comme s’il était “dessiné”.

  Ce module est autonome (si vous l’utilisez) : il ne dépend pas des autres réglages du panneau.

  Vous retrouvez aussi “Style”, “Mode” et “Durée” — mais ici, ça s’applique uniquement à l’effet de texte.

  Texte à afficher

  Vous avez 3 lignes : haut, milieu et bas.

  Chaque ligne accepte jusqu’à 12 caractères (prénom, “-20%”, “LOVE”, nom de marque…).

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

  Prévisualisation

  Utilisez le bouton de prévisualisation pour tester et ajuster jusqu’au rendu parfait.

• 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 une promo Saint-Valentin, un décor saisonnier, ou un “moment coup de foudre” sur votre site.

• 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 Saint-Valentin 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 : le site se charge d’abord “normalement”, puis l’animation se pose ensuite comme une couche décorative par-dessus le contenu.

• Comment activer les options d’affichage

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

  Vous allez juste dans les réglages de votre élément (bloc HTML) dans votre éditeur de site, (bloc, hero, encart…) et vous modifiez le champ qui s’appelle souvent “Classe CSS” ou “CSS class”.

  Règles simples :

  - Utilisez les mots fournis plus bas (ex : over-effect, effet-ici, etc.) : ce sont les consignes à ajouter dans la Classe CSS.

  - Collez-les dans le champ Classe CSS.

  - Écrivez-les exactement comme indiqués (tirets compris).

  - Si votre élément a déjà une classe, gardez-la et ajoutez ces mots à la suite (avec un espace).

  Mode Pleine page (exceptions)

  En mode Pleine page, l’effet s’affiche par-dessus la page. Pour garder un élément au premier plan (hero, menu, bouton, texte…), ajoutez dans sa Classe CSS : over-effect Résultat : l’élément reste devant, l’effet passe derrière.

  Éléments à intégrer

  Pour afficher l’effet uniquement dans un élément (hero, encart, bloc…), ajoutez dans sa Classe CSS : effet-ici

  Résultat : l’effet s’affiche dans ce bloc, pas sur toute la page.

  Choisissez comment ça se déclenche (optionnel)