Animation romantique pour site de mariage – effet Pétales de rose

Modes & options du panneau (Pétales de rose)

• MODES

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

  Pluie : une pluie régulière de pétales.

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

  Explosion : idéal pour marquer une validation, confirmation... : 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 pétales.

  Densité : nombre de pétales à l’écran. Plus vous montez, plus l’ambiance est présente.

  Taille : petits pétales discrets ou grands pétales bien visibles.

  Transparence : léger et romantique… ou plus marqué selon votre style.

  Vitesse : lente et élégante… ou plus dynamique pour un moment fort.

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

• Palette

  Ici, la Palette correspond à la couleur des pétales.

  Vous avez 4 couleurs disponibles. Vous pouvez en choisir une seule pour un rendu 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.

• DURÉE

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

  Pluie : durée totale de la pluie de pétales.

  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 pétales 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 pétales s’affichent seulement dans les blocs que vous choisissez (hero, encart…).

  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 rendu vivant.

  Attraction : les pétales 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 pétales apparaît instantanément — parfait sur un bouton (réserver, confirmer, acheter…).

  Nombre de pétales : règle l’intensité du Pop.

• EFFETS DE TEXTE (Premium)

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

  Les particules viennent se regrouper pour former les lettres, 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, date, “LOVE”, message…).

  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 un décor saisonnier, une annonce, ou un “moment fort” 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 Pétales de rose 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)