Scrollbare, gekürzte Textebenen zu Bannern hinzufügen

Nutze gekürzte Textebenen in Figma, um mit Bannerify scrollbaren HTML-Text oder automatisch scrollenden Text in GIFs und Videos zu exportieren.

Video-Tutorial: Scrollbare Texthinweise zu Banner-Exporten aus Figma hinzufügen

Dieses Video zeigt, wie du mit dem Plugin Bannerify scrollbare Texthinweise (mit automatischem Scrollen) zu Banner-Exporten aus Figma hinzufügst.

Wenn lange Rechtstexte, Sicherheitshinweise oder Pflichtangaben (PI) auf kleinem Raum lesbar bleiben müssen, kann Bannerify eine gekürzte Textebene als nativ scrollbaren HTML-Text exportieren und automatisch scrollenden Text in GIF- und Videoausgaben rendern.

Wenn du statt scrollbarem Text im Banner ein schließbares Overlay brauchst, sieh dir Popup-Overlay hinzufügen an.

Schritt 1. Gekürzte Textebene in Figma erstellen ​

Erstelle eine Textebene mit fester Textfeldgröße und stelle sicher, dass sie auf Truncate steht (statt automatisch zu wachsen).

In HTML-Exporten wird die sichtbare Größe des Textfelds zum Scroll-Container, in dem der vollständige Text erhalten bleibt. In GIF- und Videoexporten schneidet dasselbe Textfeld die gerenderte automatische Scrollbewegung zu.

Schritt 2. Scrollbaren Text in Bannerify aktivieren ​

Öffne die Ebeneneinstellungen dieser Textebene und aktiviere:

  • Enable scrollable text

Diese Funktion gibt es nur für gekürzte Textebenen.

Schritt 3. Scrollverhalten wählen ​

Wähle nach dem Aktivieren einen dieser Modi:

  • Manual User Scrollable: Die Nutzer scrollen während der gesamten Zeitleiste selbst.
  • Auto Scroll on Layer Enter: Das automatische Scrollen beginnt, sobald die Ebene erscheint.
  • Auto Scroll on Banner End: Das automatische Scrollen beginnt, wenn die Zeitleiste des Banners endet.

In GIF- und Videoexporten nutzen beide Modi für automatisches Scrollen dieselbe Scrollgeschwindigkeit wie HTML-Exporte. Braucht das Scrollen mehr Zeit als die ursprüngliche Zeitleiste des Banners, wird die exportierte Datei verlängert, damit der Text mit dieser Geschwindigkeit zu Ende scrollen kann.

  • Ist die Anzahl der Wiedergaben begrenzt, startet Auto Scroll on Banner End nur beim letzten Durchlauf.
  • Ist das Banner auf Endlosschleife eingestellt, wird Auto Scroll on Banner End übersprungen.

Schritt 4. Hinweise zum Export prüfen ​

  • In HTML-Ausgaben bleibt der manuelle Modus vom Nutzer scrollbar. In beiden automatischen Modi stoppt eine Eingabe per Mausrad, Touch oder Scrollleiste die automatische Bewegung an der aktuellen Position, sodass der Nutzer selbst weiterscrollen kann.
  • In GIF/video-Ausgaben wird das automatische Scrollen in die exportierten Frames gerendert; der manuelle Modus bleibt statisch, weil exportierte Dateien nicht interaktiv sind.
  • Es werden die nativen Scrollleisten des Browsers bzw. Geräts verwendet.
  • Ist für diese Ebene ein überschriebenes Bildformat eingestellt, ist scrollbarer Text für diese Ebene deaktiviert.

Stile der Scrollleiste anpassen ​

Wenn du die Scrollleiste für scrollbare, gekürzte Textebenen oder den Text von Popup-Overlays anpassen willst, aktiviere in deinen HTML-Exporteinstellungen Inject Custom Code und füge Folgendes in das Feld Custom CSS ein.

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);
}

Mit den Werten oben änderst du Farbe, Spurfarbe, Breite, Höhe und Eckenradius der Scrollleiste. Manche Browser und Mobilgeräte stellen Scrollleisten trotzdem im nativen Systemstil dar, aber das CSS wird überall angewendet, wo der Client eigene Scrollleisten-Stile zulässt.

Scrollbarer Text ist nur für gekürzte Textebenen gedacht. Ist deine Ebene nicht gekürzt, sollte sie mit dem normalen Text- bzw. Bildverhalten exportiert werden.