Animowanie elementów landing page’a

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.

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:

1. Dodaj opóźnienie animacji (w sekundach) albo zostaw „0”, jeśli ma się rozpocząć od razu po załadowaniu.
2. Włącz zapętlenie animacji, jeśli chcesz, by powtarzała się automatycznie.
3. 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.