Każdy element na landing page’u możesz animować – wystarczy wybrać animację dla pojedynczego widgetu w panelu po prawej stronie edytora (albo zastosować jedną animację dla wszystkich elementów w sekcji z poziomu ustawień tej sekcji). Możesz też dodać własne niestandardowe animacje przy użyciu CSS, JavaScriptu i klas.
Animacje uruchamiają się, kiedy odwiedzający przewinie stronę do miejsca, w którym się znajdują.
PAMIĘTAJ: Landing page’e nie powinny być przeładowane animacjami. Ruch odciąga uwagę od treści i samego przekazu strony. Poniższej możesz zobaczyć przykład animacji ikony.
Jak dodawać animacje w edytorze
Każdemu widgetowi na landing page’u możesz dodać animację bezpośrednio w edytorze. Oto jak to zrobić:
1. Kliknij widget, który chcesz animować. Może to być ikona, tekst, obraz, kształt, formularz, przycisk, a nawet tło sekcji.
WSKAZÓWKA: Animowanie całych teł sekcji może być przytłaczające – zachowaj umiar, żeby nie obniżyć czytelności.
2. W panelu po prawej stronie włącz i rozwiń zakładkę Animacja. Wybierz jedną z dostępnych opcji z listy (typ animacji wejścia).
Zobacz podgląd wszystkich dostępnych animacji wejścia.
3. Dostosuj ustawienia:
- Dodaj opóźnienie animacji (w sekundach) albo zostaw „0”, jeśli ma się rozpocząć od razu po załadowaniu.
- Włącz zapętlenie animacji, jeśli chcesz, by powtarzała się automatycznie.
- Jeśli edytujesz całą sekcję, możesz zaznaczyć opcję Zastosuj tę animację do każdego elementu w sekcji. Wtedy animowane będą wszystkie elementy w tej sekcji – ale samo tło sekcji pozostanie statyczne.
4. Podejrzyj lub opublikuj landing page, żeby zobaczyć animacje w akcji. W edytorze animacje się nie odtwarzają.
Dodawanie niestandardowych animacji
Aby dodać niestandardowe animacje do elementów landing page’a, najpierw dodaj kod CSS i JavaScript. Następnie zastosuj klasy do tych elementów, aby określić animację.
Dodaj kody CSS i JavaScript
1. Zaloguj się na swoje konto w platformie Landingi i przejdź do edytora landing page’a, na którym chcesz dodać animację.
2. W edytorze wejdź w Ustawienia strony w toolbarze po prawej stronie i kliknij w przycisk Dodaj własny CSS.
Podczas edycji do Ustawień strony wrócisz, klikając na strzałkę:
3. Dodaj poniższy kod CSS na samej górze okna (jeśli posiadasz już jakieś kody CSS) i zapisz zmiany.
@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/v2/animate.min.css';
4. Jeżeli chcesz zapętlić animację, dodaj poniższy kod pod kodem przed chwilą dodanym – zamień nazwa_animacji na wybraną nazwę animacji.
.nazwa_animacji {
animation-iteration-count: infinite;
}5. Opublikuj landing page’a i wejdź w Dashboard i zakładkę Kody JavaScript. Kliknij w Dodaj kod. Do Kodów JavaScript możesz przejść także bezpośrednio z edytora:
6. W nowym oknie wklej poniższą linijkę kodu na Stronie głównej landing page’a, na pozycji Body – na górze, a na koniec kliknij Dodaj.
<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
Bez względu na ilość animacji na landing page’u kod CSS i JavaScript dodajesz tylko raz.
Dodaj klasę do wybranych elementów na landing page’u
Po dodaniu kodu CSS i Javascript możesz wybrać, w jaki sposób i które elementy landing page’a chcesz animować.
1. Wybierz animację, korzystając np. ze strony Animate.style. Skopiuj jej nazwę.
WAŻNE: Niestety niektóre animacje mogą nie zadziałać na Twoim landing page’u. Poniżej znajdziesz listę niedziałających animacji:
- shakeX
- shakeY
- heartBeat
- lightSpeed
- lightSpeedInRight
- lightSpeedInLeft
- lightSpeedOutRight
- lightSpeedOutLeft
- jackInTheBox
- fadeInTopRight
- fadeInTopLeft
2. Przejdź ponownie do edycji swojego landing page’a i zaznacz element, który chcesz animować – to może być obraz, ikona lub tekst. Nie animuj przycisków, które są wyzwalaczami pop upów i lightboksów.
3. W pasku bocznym odszukaj zakładkę Inne i w polu Klasy wpisz nazwę animacji poprzedzoną komendą “wow” i jedną spacją, np.: wow flipInX. Powtórz ten krok dla wszystkich elementów, które chcesz animować.
PAMIĘTAJ: Kod w polu Klasy rozróżnia małe i wielkie litery, dlatego nazwy efektów należy skopiować dokładnie.
4. Opublikuj swojego landing page’a. Sprawdź, czy animacja wyświetla się zgodnie z Twoimi oczekiwaniami.
