Adicionar camadas de texto truncado com rolagem aos banners

Use camadas de texto truncado no Figma para exportar texto HTML com rolagem ou texto com rolagem automática em GIF e vídeo no Bannerify.

Vídeo tutorial: adicione avisos legais com rolagem às exportações de banners do Figma

Este vídeo mostra como adicionar avisos legais com rolagem (e rolagem automática) às exportações de banners do Figma usando o plugin Bannerify.

Se você precisa que um texto legal longo, avisos de segurança ou informações de prescrição (PI) continuem legíveis em uma área compacta, o Bannerify pode exportar uma camada de texto truncado como texto HTML nativo com rolagem e renderizar texto com rolagem automática nas saídas em GIF/vídeo.

Se você prefere uma sobreposição que pode ser fechada em vez de texto com rolagem no próprio banner, veja Adicionar sobreposição pop-up.

Passo 1. Crie uma camada de texto truncado no Figma ​

Crie uma camada de texto com uma caixa de texto de tamanho fixo e confira se ela está definida como Truncate (em vez de crescer automaticamente).

Nas exportações HTML, o tamanho visível da caixa de texto vira o contêiner de rolagem, e todo o conteúdo do texto é preservado dentro dele. Nas exportações em GIF/vídeo, a mesma caixa de texto recorta o movimento da rolagem automática renderizada.

Passo 2. Ative o texto com rolagem no Bannerify ​

Abra as configurações dessa camada de texto e ative:

  • Enable scrollable text

Este recurso só está disponível para camadas de texto truncado.

Passo 3. Escolha o comportamento da rolagem ​

Depois de ativar, escolha um destes modos:

  • Manual User Scrollable: o usuário rola manualmente durante toda a linha do tempo.
  • Auto Scroll on Layer Enter: a rolagem automática começa quando a camada entra.
  • Auto Scroll on Banner End: a rolagem automática começa quando a linha do tempo do banner termina.

Nas exportações em GIF/vídeo, os dois modos de rolagem automática usam a mesma velocidade de rolagem das exportações HTML. Se a rolagem precisar de mais tempo que a linha do tempo original do banner, o arquivo exportado é estendido para que o texto termine de rolar nessa velocidade.

  • Se o número de reproduções for finito, Auto Scroll on Banner End só é acionado na última reprodução.
  • Se o banner estiver configurado para repetir infinitamente, Auto Scroll on Banner End é ignorado.

Passo 4. Revise as observações sobre a exportação ​

  • Nas saídas HTML, o modo manual continua permitindo que o usuário role. Em qualquer um dos modos automáticos, rolar com a roda do mouse, o toque ou a barra de rolagem interrompe o movimento automático na posição atual, para que o usuário continue rolando manualmente.
  • Nas saídas em GIF/video, os modos de rolagem automática são renderizados nos frames exportados; o modo manual fica estático, porque os arquivos exportados não são interativos.
  • É usado o estilo nativo da barra de rolagem do navegador/dispositivo.
  • Se essa camada tiver uma substituição de formato de imagem aplicada, o texto com rolagem fica desativado para ela.

Personalizar os estilos da barra de rolagem ​

Se você quer personalizar o estilo da barra de rolagem das camadas de texto truncado com rolagem ou do texto de popups sobrepostos, ative Inject Custom Code nas configurações de exportação HTML e cole isto no 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);
}

Altere os valores no início para atualizar a cor da barra de rolagem, a cor da trilha, a largura, a altura e o raio dos cantos. Alguns navegadores e dispositivos móveis ainda podem renderizar as barras de rolagem com o estilo nativo do sistema, mas o CSS é aplicado sempre que o cliente permite estilos personalizados de barra de rolagem.

O texto com rolagem foi criado apenas para camadas de texto truncado. Se a sua camada não estiver truncada, ela deve ser exportada com o comportamento normal de texto/imagem.