Animowanie elementów

Ostatnia aktualizacja: 17.12.2019

Na swoim landingu możesz wykorzystać animacje, dodając odpowiedni kod CSS i JavaScript oraz przypisując animowanym elementom klasy.

Animacje pojawią się, kiedy odwiedzający przewinie stronę do pozycji animowanego elementu.

Pamiętaj, że strony typu landing page nie powinny być przeładowane animacjami. Ruch odciąga uwagę od treści i samego przekazu strony. Warto animować elementy, które zachęcają do podjęcia akcji, np. strzałki, które wskazują CTA lub przyciski. Poniższy przykład animacji ma na celu jedynie zaprezentowanie możliwości animacji. Nie zalecamy animować landing page w takim stopniu, jak pokazujemy to poniżej.

animations_example

Dodawanie animacji

Krok I – dodanie kodu CSS i JavaScript

1. Zaloguj się do platformy Landingi, przejdź do zakładki Landingi, a następnie wejdź w Edycję landinga, na którym chcesz dodać animację.

2. W edytorze wejdź w Ustawienia strony w panelu opcji po prawej stronie i kliknij w przycisk Własny CSS.

animowanie_elementów_PL1

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/animate.css';
animowanie_elementów_PL2

3. Opublikuj swój landing page i wejdź w Dashboard > Kody JavaScript. Kliknij w Dodaj kod. W nowym oknie wklej poniższą linijkę kodu na stronie głównej landinga, na pozycji Body – na górze, a na koniec kliknij w Dodaj.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
animowanie_elementów_PL4

Bez względu na ilość animacji na landingu, kod CSS i JavaScript dodajesz tylko raz.

Krok II – dodanie klasy do wybranych elementów na landingu

Po dodaniu kodu CSS i JavaScript możesz wybrać, w jaki sposób i które elementy landinga chcesz animować.

1. Wybierz animację, korzystając np. ze strony https://daneden.github.io/animate.css/ i skopiuj jej nazwę.

animate_css

2. Przejdź poownie do edycji swojego landinga i zaznacz element, który chcesz animować – w naszym przykładzie jest to obraz.

animowanie_elementów_PL3

W panelu po prawej, w opcjach widgetu w polu Klasy wpisz wybraną nazwę animacji CSS 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.

7. Opublikuj swojego landinga.

Animacja została już dodana do Twojego landing page’a – sprawdź, czy wyświetla się zgodnie z Twoimi oczekiwaniami.

Czy ten artykuł był dla Ciebie pomocny?

Nadal potrzebujesz pomocy?

Skontaktuj się z naszym supportem. Chętnie pomożemy.
Wyślij nam wiadomość
Ta strona używa plików cookies w celach analitycznych. Polityka prywatności.