Animowanie elementów

Zaktualizowano: 26 października, 2021 Autor: Avatar Teresa
share
Spis treści
share
Spis treści

Na swoim landing page'u możesz wykorzystać animacje, dodając odpowiedni kod CSS i JavaScript oraz przypisując 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 hasła. Poniższej możesz zobaczyć przykład animacji.

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 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';
css animacja

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:

dashboard javascript landingi

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>

javascript animacja

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ę.

nazwy animacji

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.

share

Czy ta instrukcja była pomocna?