Ajouter des calques de texte tronqué défilants aux bannières

Utilisez des calques de texte tronqué dans Figma pour exporter du texte HTML défilant, ou du texte à défilement auto en GIF et vidéo, avec Bannerify.

Tutoriel vidéo : ajouter des mentions légales défilantes aux exports de bannières Figma

Cette vidéo montre comment ajouter des mentions légales défilantes (avec défilement automatique) aux exports de bannières Figma avec le plugin Bannerify.

Si un long texte juridique, des consignes de sécurité ou des informations de prescription (PI) doivent rester lisibles dans une zone réduite, Bannerify peut exporter un calque de texte tronqué sous forme de texte HTML défilant natif, et rendre un texte à défilement automatique dans les sorties GIF/vidéo.

Si vous préférez une superposition que l’on peut fermer plutôt qu’un texte défilant intégré, consultez Ajouter une fenêtre superposée.

Étape 1. Créer un calque de texte tronqué dans Figma ​

Créez un calque de texte avec une zone de texte de taille fixe, et vérifiez qu’il est réglé sur Truncate (et non en agrandissement automatique).

Dans les exports HTML, la taille visible de la zone de texte devient le conteneur de défilement, et l’intégralité du texte est conservée à l’intérieur. Dans les exports GIF/vidéo, cette même zone de texte rogne le défilement automatique rendu.

Étape 2. Activer le texte défilant dans Bannerify ​

Ouvrez les réglages de ce calque de texte, puis activez :

  • Enable scrollable text

Cette fonctionnalité n’est disponible que pour les calques de texte tronqué.

Étape 3. Choisir le comportement de défilement ​

Une fois l’option activée, choisissez l’un de ces modes :

  • Manual User Scrollable : l’utilisateur fait défiler le texte manuellement pendant toute la timeline.
  • Auto Scroll on Layer Enter : le défilement automatique démarre à l’entrée du calque.
  • Auto Scroll on Banner End : le défilement automatique démarre à la fin de la timeline de la bannière.

Dans les exports GIF/vidéo, les deux modes de défilement automatique utilisent la même vitesse de défilement que les exports HTML. Si le défilement demande plus de temps que la timeline d’origine de la bannière, le fichier exporté est prolongé pour que le texte puisse finir de défiler à cette vitesse.

  • Si le nombre de lectures est limité, Auto Scroll on Banner End ne se déclenche que lors de la dernière lecture.
  • Si la bannière est réglée pour boucler à l’infini, Auto Scroll on Banner End est ignoré.

Étape 4. Vérifier les remarques sur l’export ​

  • Dans les sorties HTML, le mode manuel reste défilable par l’utilisateur. Dans les deux modes automatiques, une action de la molette, du toucher ou de la barre de défilement arrête le mouvement automatique à sa position actuelle pour que l’utilisateur puisse continuer à faire défiler le texte manuellement.
  • Dans les sorties GIF/vidéo, les modes de défilement automatique sont rendus dans les images exportées ; le mode manuel reste statique, car les fichiers exportés ne sont pas interactifs.
  • Le style natif de la barre de défilement du navigateur ou de l’appareil est utilisé.
  • Si un format d’image forcé est appliqué à ce calque, le texte défilant est désactivé pour ce calque.

Personnaliser le style des barres de défilement ​

Pour personnaliser le style de la barre de défilement des calques de texte tronqué défilant ou du texte des pop-ups, activez Inject Custom Code dans vos réglages d’export HTML, puis collez ce code dans le champ Custom CSS.

css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

Modifiez les valeurs en haut du code pour changer la couleur de la barre, la couleur de la piste, la largeur, la hauteur et le rayon des coins. Certains navigateurs et appareils mobiles peuvent continuer d’afficher les barres de défilement avec le style natif du système, mais le CSS s’applique partout où le client autorise la personnalisation des barres de défilement.

Le texte défilant est conçu uniquement pour les calques de texte tronqué. Si votre calque n’est pas tronqué, il doit être exporté avec le comportement texte/image habituel.