---
url: "/pt/bannerify/design/scrollable-text.md"
description: "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."
---

# 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.
[Embedded media](https://www.youtube-nocookie.com/embed/lDPV4QU_ZRU)

[Video](/assets/videos/bannerify/design/scrollable-text.mp4)

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](/pt/bannerify/design/popups).

## Passo 1. Crie uma camada de texto truncado no Figma {#step-1-create-a-truncated-text-layer-in-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 {#step-2-enable-scrollable-text-in-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 {#step-3-choose-scroll-behavior}

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.

### Comportamento de repetição do banner {#banner-loop-behavior}

- 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 {#step-4-review-export-notes}

- 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 {#customizing-scrollbar-styles}

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.

> **Warning:** 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.