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).

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.

1. krok: utwórz przyciętą warstwę tekstową w Figmie

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

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

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

• 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

• 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

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.

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

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.