Animowanie elementów

14.02.2019

Animacje, które wykorzystasz na swoim landingu, będą pojawiać się na ekranie w momencie, kiedy użytkownik przewinie stronę do pozycji animowanego elementu.

Pamiętaj, że strony typu landing page nie powinny być przeładowane elementami animowanymi. 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

1. Wejdź w Edycję landinga, na którym chcesz dodać animację.

wybor_lp

2. W edytorze wybierz Ustawienia strony z prawego panelu opcji.

ustawienia_lp

Otwórz kartę Własny CSS i dodaj poniższy kod na samej górze okna (jeśli posiadasz już jakieś kody w tej zakładce).

@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/animate.css';
dodaj_css

3. Następnie, opublikuj swój landing page i przejdź z powrotem do kampanii – po przejściu wejdź w zakładkę Kody JavaScript, kliknij Dodaj kod, po czym skopiuj i wklej w pole poniższą linijkę kodu, pamietając o zapisie.

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

5. Możesz dodać do swojego landing page’a animację, korzystając np. ze strony https://daneden.github.io/animate.css/.

animate_css

6. W następnym kroku przejdź z powrotem do edytora tego landinga i zaznacz element, który chcesz animować – w tym przykładzie jest to tekst.

edycja_lp_klasa_css
image

W prawym panelu opcji tego tekstu, w polu Klasy, wpisz wybraną nazwę animacji CSS poprzedzoną komendą ‚wow’ i jedną spacją, np.: wow flipInX

PAMIĘTAJ: Kod w polu Klasy rozróżnia małe i wielkie litery, dlatego nazwy efektów należy zawsze przepisywać dokładnie tak, jak wyglądają w oryginale.

klasy2

7. Na koniec opublikuj swojego landinga i sprawdź, jak wygląda animacja.

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.