Poradnik wideo: dodawanie animacji dzielonego tekstu do banerów w Figmie
Ten film pokazuje, jak za pomocą wtyczki Bannerify dodać do banerów w Figmie animacje dzielonego tekstu (po znakach, słowach lub wierszach).
Korzystanie z animacji dzielonego tekstu
Bannerify zawiera osobny zestaw animacji Split Text dla warstw tekstowych. Pozwalają one animować tekst po znakach, słowach lub wierszach zamiast przesuwać całą warstwę jako jeden blok.
Aby zastosować taką animację:
- Dodaj do baneru zwykłą warstwę tekstową z Figmy.
- Wczytaj warstwę na oś czasu Bannerify.
- Kliknij pole wyboru animacji wejścia lub wyjścia dla tej warstwy tekstowej.
- Otwórz grupę Split Text (GSAP Only).
- Wybierz animację dzielonego tekstu.
- Podejrzyj wynik w Bannerify i w razie potrzeby dostosuj czas.
Aby uzyskać najczystszy wynik końcowy, użyj eksportu HTML / GSAP, jeśli chcesz korzystać ze specjalnego mechanizmu dzielonego tekstu w Bannerify.
Łączenie animacji wejścia i wyjścia
Dzielonego tekstu możesz użyć w animacji wejścia, w animacji wyjścia lub w obu.
- Animacje dzielonego tekstu dla wejścia i wyjścia mają tę samą kolejność na listach wyboru, więc łatwo je dopasować w pary.
- Tam, gdzie to możliwe, nazwy animacji wyjścia są lustrzanym odbiciem nazw wejścia, na przykład Type On / Type Off, Rise / Fall i Reveal / Conceal.
- Najlepsze efekty uzyskasz, gdy animacja wyjścia zaczyna się po zakończeniu animacji wejścia.
Obsługiwane warstwy tekstowe
Dzielony tekst jest dostępny tylko wtedy, gdy zaznaczoną warstwę można bezpiecznie przygotować jako tekst HTML z formatowaniem.
Warstwa tekstowa powinna:
- być zwykłą warstwą tekstową,
- używać fontu bezpiecznego dla sieci (web-safe), Google Font lub własnego fontu z bezpośrednim adresem URL pliku .woff / .woff2 dodanym w panelu własnych fontów Bannerify,
- nie zawierać linków w tekście,
- nie mieć formatowania listy,
- nie mieć nadpisań formatu tekstu,
- nie korzystać z trybu przewijanego tekstu Bannerify.
Jeśli później zmienisz obsługiwaną warstwę z powrotem na nieobsługiwany font lub nieobsługiwane ustawienia tekstu, Bannerify zachowa wybraną animację dzielonego tekstu na warstwie, ale oznaczy ją jako niedostępną, dopóki warstwa znów nie spełni wymagań.
Adresy URL własnych fontów
Jeśli warstwa tekstowa używa własnego fontu marki, który nie jest dostępny jako font web-safe ani Google Font, dodaj bezpośredni adres URL pliku fontu .woff lub .woff2 w panelu własnych fontów Bannerify.
Adres URL musi prowadzić bezpośrednio do samego pliku fontu, na przykład https://example.com/fonts/client-font.woff2. Zwykła strona fontu, strona pobierania, plik CSS ani plik ZIP nie zadziałają w tym polu.
Bannerify wykrywa style własnych fontów używane przez warstwy Split Text i wyświetla każdy styl tylko raz, więc wklejasz adres URL dla danego stylu fontu zamiast dodawać ten sam adres do każdej warstwy tekstowej.
Aby otworzyć panel własnych fontów:
- Zastosuj animację Split Text do warstwy tekstowej z własnym fontem.
- Kliknij Configure Fonts w ostrzeżeniu pod podglądem baneru albo najedź kursorem na warstwę tekstową na osi czasu i kliknij Fonts.
- Wklej bezpośredni adres URL pliku .woff lub .woff2 dla każdego wymienionego stylu fontu.
- Kliknij Done, a potem ponownie uruchom podgląd lub eksport.
Bannerify używa tych adresów URL fontów do renderowania podglądu Split Text, eksportów canvas/wideo oraz eksportów HTML / GSAP. W eksportach HTML / GSAP Bannerify automatycznie dodaje też odpowiednią regułę @font-face.
Animacje Split Text możesz wybrać dla warstw z własnym fontem jeszcze przed dodaniem adresu URL fontu. Bannerify będzie wyświetlać ostrzeżenie pod podglądem baneru, dopóki nie dodasz prawidłowego adresu URL pliku .woff lub .woff2.
Jeśli wcześniej dodano adres URL własnego fontu Split Text bezpośrednio do warstwy tekstowej, Bannerify po otwarciu nowego panelu własnych fontów automatycznie przeniesie tam zapisany adres.
Kiedy dzielony tekst jest niedostępny
Bannerify zablokuje dzielony tekst na warstwach w każdej z tych sytuacji:
- zaznaczona warstwa nie jest warstwą tekstową,
- warstwa ma nadpisanie formatu,
- na warstwie włączono Scrollable Text,
- tekst zawiera linki w treści,
- tekst jest sformatowany jako lista,
- Bannerify nie może przygotować warstwy tekstowej do podglądu dzielonego tekstu.
W takiej sytuacji Bannerify pokaże przyczynę bezpośrednio w interfejsie wtyczki zamiast po cichu stosować animację.
Jeśli jedynym problemem jest własny font bez prawidłowego adresu URL pliku .woff / .woff2, Bannerify pozwala wybrać animację Split Text i wyświetla ostrzeżenie zamiast ukrywać tę opcję.
Masowe stosowanie, wklejanie i skróty z klawiatury numerycznej
Gdy stosujesz dzielony tekst do wielu warstw jednocześnie, obowiązują surowsze zasady niż w przypadku zwykłych animacji.
- Każda zaznaczona warstwa musi być warstwą tekstową.
- Każda zaznaczona warstwa tekstowa musi już spełniać wymagania dzielonego tekstu albo potrzebować jedynie adresu URL własnego fontu .woff / .woff2.
Ta zasada dotyczy:
- masowego stosowania,
- kopiowania i wklejania animacji,
- stosowania za pomocą skrótów z klawiatury numerycznej.
Jeśli choć jedna zaznaczona warstwa nie jest obsługiwana, Bannerify zablokuje tę akcję dzielonego tekstu i wyświetli ostrzeżenie.
Podgląd i eksport
Bannerify oznacza tę grupę jako Split Text (GSAP Only), ponieważ eksporty HTML / GSAP korzystają ze specjalnego mechanizmu dzielonego tekstu w Bannerify.
W obecnych wersjach:
- podgląd Bannerify obsługuje dzielony tekst,
- obecne ścieżki eksportu renderowane przez canvas również mogą renderować dzielony tekst,
- eksport HTML / GSAP to nadal najlepsza opcja, jeśli chcesz uzyskać najwierniejszą animację dzielonego tekstu opartą na tekście.
Najlepsze efekty
- Używaj dzielonego tekstu głównie w krótkich nagłówkach, wyróżnieniach lub zwięzłych tekstach.
- Pamiętaj o celowych podziałach wierszy, ponieważ animacje dzielące tekst na wiersze opierają się na wyrenderowanym układzie tekstu.
- Przed eksportem podejrzyj animację w docelowym rozmiarze baneru.