Añadir capas de texto truncado con scroll a tus banners

Usa capas de texto truncado de Figma para exportar texto HTML con scroll o texto con desplazamiento automático en GIF y vídeo con Bannerify.

Tutorial en vídeo: añade avisos legales con scroll a las exportaciones de banners de Figma

Este vídeo muestra cómo añadir avisos legales con scroll (y desplazamiento automático) a las exportaciones de banners de Figma con el plugin Bannerify.

Si necesitas que un texto legal largo, un aviso de seguridad o la información de prescripción (PI) sigan siendo legibles en un espacio reducido, Bannerify puede exportar una capa de texto truncado como texto HTML nativo con scroll y renderizar texto con desplazamiento automático en las exportaciones GIF y de vídeo.

Si prefieres una superposición que se pueda cerrar en lugar de texto con scroll dentro del banner, consulta Añadir una superposición emergente.

Paso 1. Crea una capa de texto truncado en Figma ​

Crea una capa de texto con un cuadro de texto de tamaño fijo y asegúrate de que está configurada como Truncate (en lugar de crecer automáticamente).

En las exportaciones HTML, el tamaño visible del cuadro de texto se convierte en el contenedor de scroll, y todo el contenido del texto se conserva dentro. En las exportaciones GIF y de vídeo, ese mismo cuadro de texto recorta el movimiento del desplazamiento automático renderizado.

Paso 2. Activa el texto con scroll en Bannerify ​

Abre los ajustes de esa capa de texto y activa:

  • Enable scrollable text

Esta función solo está disponible para capas de texto truncado.

Paso 3. Elige cómo se desplaza el texto ​

Una vez activada, elige uno de estos modos:

  • Manual User Scrollable: el usuario hace scroll manualmente durante toda la línea de tiempo.
  • Auto Scroll on Layer Enter: el desplazamiento automático empieza cuando entra la capa.
  • Auto Scroll on Banner End: el desplazamiento automático empieza cuando termina la línea de tiempo del banner.

En las exportaciones GIF y de vídeo, los dos modos automáticos usan la misma velocidad de desplazamiento que en las exportaciones HTML. Si el desplazamiento necesita más tiempo que la línea de tiempo original del banner, el archivo exportado se alarga para que el texto pueda terminar de desplazarse a esa velocidad.

  • Si el número de reproducciones es finito, Auto Scroll on Banner End solo se activa en la última reproducción.
  • Si el banner está configurado en bucle infinito, Auto Scroll on Banner End no se activa.

Paso 4. Revisa las notas de exportación ​

  • En las exportaciones HTML, el modo manual sigue permitiendo que el usuario haga scroll. En cualquiera de los modos automáticos, usar la rueda del ratón, la pantalla táctil o la barra de desplazamiento detiene el movimiento automático en su posición actual para que el usuario pueda seguir desplazándose manualmente.
  • En las exportaciones GIF/video, los modos de desplazamiento automático se renderizan en los fotogramas exportados; el modo manual queda estático porque los archivos exportados no son interactivos.
  • Se usa el estilo nativo de la barra de desplazamiento del navegador o del dispositivo.
  • Si esa capa tiene aplicado un formato de imagen específico, el texto con scroll se desactiva para esa capa.

Personalizar los estilos de la barra de desplazamiento ​

Si quieres personalizar el estilo de la barra de desplazamiento de las capas de texto truncado desplazable o del texto de las ventanas emergentes, activa Inject Custom Code en los ajustes de exportación HTML y pega esto en el campo 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);
}

Puedes cambiar los valores de arriba para actualizar el color de la barra de desplazamiento, el color del carril, el ancho, el alto y el radio de las esquinas. Algunos navegadores y dispositivos móviles pueden seguir mostrando las barras de desplazamiento con el estilo nativo del sistema, pero el CSS se aplicará siempre que el cliente permita personalizar el estilo de la barra de desplazamiento.

El texto con scroll está pensado solo para capas de texto truncado. Si tu capa no está truncada, debe exportarse con el comportamiento normal de texto o imagen.