Articles sur : Blocs Celestory
Cet article est aussi disponible en :

🟧 Fond

🟧 Fond



Le bloc Fond permet de changer dynamiquement l'arrière-plan visuel d'une application ou d'une histoire, en appliquant des images, des couleurs unies, ou du texte avec des effets de transition personnalisables.


Ce bloc est idéal pour créer des ambiances visuelles immersives, adapter l'arrière-plan en fonction du contexte narratif, ou ajouter des éléments textuels temporaires sans modifier la structure globale de l'interface.


📥 Entrées


  • in (Trigger) : Déclencheur du changement d'arrière-plan. Le fond est modifié dès que le flux traverse ce bloc.
  • fond (Background) : Image ou couleur à appliquer en arrière-plan. Peut être une URL, un chemin local, ou une valeur hexadécimale pour les couleurs.
  • duration (Number) : Durée de la transition en secondes (par défaut : 0, soit un changement instantané).
  • outEffect (String) : Effet d'animation appliqué à l'ancien fond lors de son remplacement (ex: Glissement, Fondu, Zoom).
  • inEffect (String) : Effet d'animation pour l'apparition du nouveau fond.
  • text (String) : Texte optionnel à afficher en surimpression par-dessus le fond.
  • textPosition (String) : Alignement du texte (gauche, centre ou droite, par défaut : centre).


📤 Sorties


  • out (Trigger) : S'active dès que la commande de transition d'arrière-plan est lancée, permettant d'enchaîner d'autres actions.


💡 Exemple d'utilisation


Scénario : Changement d'ambiance pour une scène nocturne


  1. L'utilisateur termine une séquence de dialogue dans un décor de jour.
  2. Le flux narratif atteint un point où l'histoire bascule vers la nuit.
  3. Le bloc Fond est placé dans le flux avec les paramètres suivants :
  • fond : Une image de ciel étoilé.
  • duration : 1.5 (transition en fondu progressif).
  • inEffect : Fondu.
  • text : "La nuit tombe sur la ville...".
  • textPosition : centre.
  1. Le fond actuel est remplacé par le ciel étoilé avec une animation fluide, et le texte apparaît brièvement.
  2. Le flux continue vers la prochaine interaction (ex: un choix de dialogue ou une action).


⚙️ Détails Techniques

  • Gestion des transitions : Les effets inEffect et outEffect utilisent des animations CSS préconfigurées. Si un effet non supporté est fourni, le bloc utilise un fondu par défaut.
  • Compatibilité : Le texte en surimpression hérite des styles par défaut de l'application, mais peut être personnalisé via des blocs CSS additionnels.
  • Performance : Pour les images lourdes, prévoir un temps de chargement avant la transition (ex: via un bloc Préchargement).

Mis à jour le : 04/03/2026

Cet article a-t-il répondu à vos questions ?

Partagez vos commentaires

Annuler

Merci !