---
url: "/pl/bannerify/design/scrollable-text.md"
description: "Użyj przyciętych warstw tekstowych w Figmie, aby eksportować w Bannerify przewijany tekst HTML lub automatycznie przewijany tekst w GIF-ach i wideo."
---

# Przewijane, przycięte warstwy tekstowe w banerach

> Użyj przyciętych warstw tekstowych w Figmie, aby eksportować w Bannerify przewijany tekst HTML lub automatycznie przewijany tekst w GIF-ach i wideo.

### Poradnik wideo: przewijane zastrzeżenia prawne w banerach eksportowanych z Figmy

Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać do banerów eksportowanych z Figmy przewijane teksty zastrzeżeń (z automatycznym przewijaniem).
[Embedded media](https://www.youtube-nocookie.com/embed/lDPV4QU_ZRU)

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

Jeśli długi tekst prawny, informacje o bezpieczeństwie lub treść PI (informacji o produkcie) mają pozostać czytelne na małej powierzchni, Bannerify może wyeksportować przyciętą warstwę tekstową jako natywny, przewijany tekst HTML, a w GIF-ach i wideo wyrenderować tekst przewijający się automatycznie.

Jeśli zamiast przewijanego tekstu w treści baneru wolisz nakładkę, którą można zamknąć, zobacz [Dodawanie nakładki pop-up](/pl/bannerify/design/popups).

## 1. krok: utwórz przyciętą warstwę tekstową w Figmie {#step-1-create-a-truncated-text-layer-in-figma}

Utwórz warstwę tekstową o stałym rozmiarze pola tekstowego i upewnij się, że ma ustawienie **Truncate** (a nie automatyczne powiększanie).

W eksportach HTML widoczny rozmiar pola tekstowego staje się kontenerem przewijania, a cała treść tekstu zostaje w nim zachowana. W eksportach GIF i wideo to samo pole tekstowe przycina wyrenderowany ruch automatycznego przewijania.

## 2. krok: włącz przewijany tekst w Bannerify {#step-2-enable-scrollable-text-in-bannerify}

Otwórz ustawienia tej warstwy tekstowej i włącz opcję:

- **Enable scrollable text**

Ta funkcja jest dostępna tylko dla przyciętych warstw tekstowych.

## 3. krok: wybierz sposób przewijania {#step-3-choose-scroll-behavior}

Po włączeniu wybierz jeden z trybów:

- **Manual User Scrollable**: użytkownik przewija tekst ręcznie przez całą oś czasu.
- **Auto Scroll on Layer Enter**: automatyczne przewijanie zaczyna się, gdy warstwa się pojawia.
- **Auto Scroll on Banner End**: automatyczne przewijanie zaczyna się po zakończeniu osi czasu baneru.

W eksportach GIF i wideo oba tryby automatycznego przewijania mają tę samą szybkość przewijania co eksporty HTML. Jeśli przewijanie potrzebuje więcej czasu niż pierwotna oś czasu baneru, wyeksportowany plik zostaje wydłużony, aby tekst zdążył się przewinąć do końca z tą szybkością.

### Zapętlanie baneru {#banner-loop-behavior}

- Jeśli liczba odtworzeń jest skończona, **Auto Scroll on Banner End** uruchamia się tylko przy ostatnim odtworzeniu.
- Jeśli baner jest zapętlony w nieskończoność, **Auto Scroll on Banner End** zostaje pominięte.

## 4. krok: sprawdź uwagi dotyczące eksportu {#step-4-review-export-notes}

- W formatach **HTML** tryb ręczny pozostaje przewijany przez użytkownika. W obu trybach automatycznych przewinięcie kółkiem myszy, dotykiem lub paskiem przewijania zatrzymuje automatyczny ruch w bieżącym położeniu, aby użytkownik mógł dalej przewijać ręcznie.
- W formatach **GIF/video** tryby automatycznego przewijania są renderowane w wyeksportowanych klatkach. Tryb ręczny pozostaje statyczny, bo wyeksportowane pliki nie są interaktywne.
- Używany jest natywny wygląd paska przewijania przeglądarki lub urządzenia.
- Jeśli dla tej warstwy nadpisano format obrazu, przewijany tekst jest dla niej wyłączony.

## Dostosowywanie stylu paska przewijania {#customizing-scrollbar-styles}

Jeśli chcesz zmienić wygląd paska przewijania w przewijanych, obciętych warstwach tekstowych lub w tekście nakładki pop-up, włącz **Inject Custom Code** w ustawieniach eksportu HTML, a potem wklej ten kod w pole **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);
}
```

Zmień wartości na górze, aby ustawić kolor paska przewijania, kolor ścieżki, szerokość, wysokość i promień zaokrąglenia narożników. Niektóre przeglądarki i urządzenia mobilne mogą nadal wyświetlać paski przewijania w natywnym stylu systemu, ale CSS zostanie zastosowany wszędzie tam, gdzie klient pozwala na własny styl pasków przewijania.

> **Warning:** Przewijany tekst jest przeznaczony wyłącznie dla przyciętych warstw tekstowych. Jeśli Twoja warstwa nie jest przycięta, powinna zostać wyeksportowana jak zwykły tekst lub obraz.