Effet confettis pour site web — sans plugin, Shopify WordPress Wix...

Modes & options du panneau

• PRESETS

  Presets : démarrez en 1 clic

  Cliquez sur P1, P2 ou P3 pour appliquer une configuration prête à l’emploi (densité, taille, transparence, vitesse, oscillation).

  Astuce : en modes Lâcher / Explosion / Mix, le preset agit sur taille et transparence (les autres paramètres sont pilotés automatiquement par le mode). Pour personnaliser finement, passez par « Réglages avancés ».

• REGLAGES AVANCES

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

  Densité : nombre de confettis à l’écran. Plus vous montez, plus ça fait “fiesta”.

  Taille des confettis : petits confettis discrets ou gros confettis bien visibles.

  Transparence : règle la discrétion. Plus c’est transparent, plus c’est léger ; plus c’est opaque, plus ça claque.

  Vitesse de chute : lente et élégante… ou mode “lancement de soirée”.

  Oscillation : amplitude du mouvement gauche / droite. Un peu pour un flottement doux, plus pour un rendu bien vivant.

• STYLE

  Donnez le ton. Carré, triangle, rond, étoile… ou Mix pour une pluie variée et dynamique.
• MODES

  Un mode = une ambiance. De la pluie légère au gros “boom”, vous pilotez l’effet.

  Pluie : une pluie régulière de confettis — c’est le “confettis qui tombent” classique : propre, continu, sans surprise.

  Lâcher : déclenche une chute depuis le haut de l’écran — si vous cherchez un “confettis qui tombent” qui démarre d’un coup, au bon moment, c’est celui-ci.

  Explosion : idéal pour marquer un succès (promo, victoire, confirmation) : “confettis qui explosent”, puis fin.

  Mix : alternance intelligente entre chute et explosion : “confettis qui tombent” + “confettis qui explosent”, pour garder l’énergie.

• DURÉE

  Durée : règle le temps de la pluie de confettis.

  Pluie : c’est la durée totale pendant laquelle la pluie tombe.

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

  Explosion : pas de durée (mode 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 confettis 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 l’effet comme un fond de page pour une ambiance plus discrète.

  Éléments à intégrer : les confettis s’affichent seulement dans les blocs que vous choisissez (ex. hero, encart promo, bloc…).

  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.

  Comment activer ces options
• INTERACTIVITÉ (Premium)

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

  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 confettis 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 apparaît instantanément — si vous cherchez un “confettis qui explosent” au clic, c’est exactement ce réglage.

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

• EFFETS DE TEXTE (Premium)

  Mettez en lumière l’essentiel : un effet de texte bien dosé, et votre message ne passe plus inaperçu.

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

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

  Vous retrouvez aussi “Style”, “Mode” et “Durée”, comme dans le panneau au-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, un prénom, une promo, le nom de votre marque…

  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 Confettis 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. Cela permet à votre site de se charger normalement en premier, puis à l’animation de se lancer 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 éditeur de site

  Vous allez juste dans les réglages de votre élément (bloc HTML) dans votre éditeur de site, (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) : ce sont les consignes à ajouter dans la Classe CSS.

  - Collez-les dans Classe CSS sur une seule ligne.

  - É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 devant (hero, menu, bouton, texte…), ajoutez dans sa Classe CSS : over-effect — l’élément reste devant, l’effet passe derrière.

  Éléments à intégrer

  Pour afficher l’effet uniquement dans un bloc (hero, encart, section…), ajoutez dans sa Classe CSS : effet-ici — l’effet s’affiche dans ce bloc, pas sur toute la page.

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