Skocz do zawartości

Efekt WOW na twojej stronie - zwiększa konwersję!

arctura12

Przez arctura12,
w Webmastering i skrypty

Rekomendowane odpowiedzi

arctura12

arctura12

Opublikowano
Opublikowano (edytowane)

Hej, w dzisiejszym poradniku chciałbym pokazać Wam jak zastosować na swoich stronach modny efekt WOW, który umożliwi Wam zwiększenie konwersji. Jest to nic innego, jak animacja elementów w czasie przewijania strony. Działanie skryptu możecie podejrzeć na stronie autora: KLIK

 

 

A więc zaczynajmy:

 

1. Wchodzimy na stronę https://github.com/matthieua/WOWa następnie do katalogu dist i pobieramy na dysk plik wow.min.js, następnie wchodzimy do katalogu css/libs i pobieramy plik animate.css, w folderze z plikami naszej strony umieszczamy uprzednio pobrane pliki.

 

2. Otwieramy za pomocą edytora kodu (to możliwości jest wiele, polecam darmowy Notepad++, lub Sublime Text 2) plik html naszej strony, najczęściej będzie to index.html, lub np. oferta.html.

 

3. Między znacznikami <head></head> dokumentu dodajemy linijki kodu:

<link rel="stylesheet" href="animate.css"><script src="wow.min.js"></script>

Na końcu sekcji <body>, tuż przed znacznikiem </body> wstawiamy:

<script> new WOW().init();</script>

UWAGA!

Jeżeli nie mamy dodanej biblioteki jQuery to dodatkowo w sekcji <head> dodajemy linijkę:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

4. 50% pracy mamy już za sobą, przyszedł teraz czas na pewne zmiany w kodzie html, za pomocą narzędzia zbadaj element w Google Chrome - prawy przycisk myszy -> zbadaj element na wybranym elemencie strony, możesz odczytać klasę lub identyfikator elementu, bądź podejrzeć jego kod html, zazwyczaj element, który będziemy mieli zamiar animować będzie znacznikiem <div> na przykład:

<div class="box1">BOX1</div>

5. Wchodzimy na stronę: https://daneden.github.io/animate.css/wybieramy interesujący nas efekt animacji i klikamy przycisk Animate it, narzędzie to pomoże nam wybrać efekt animacji, który zastosujemy na naszej stronie. Kiedy już wybierzemy, przechodzimy z powrotem do edytora i edytujemy atrybut class, lub id naszego elementu, dodając na samym początku komendę wow i nazwę animacji (tą którą wybraliśmy z listy).

 

W moim wypadku będzie to wyglądało tak:

<div class="wow bounce box1">BOX1</div>

GOTOWE!

 

Skrypt WOW, posiada jeszcze kilka przydatnych opcji, są to:

 

  • data-wow-duration - czas trwania poszczególnej animacji, wyrażony w sekundach.
  • data-wow-delay - opóźnienie animacji, wyrażone w sekundach.
  • data-wow-offset - odległość z której ma startować animacja po przewinięciu strony, mierzona od dołu przeglądarki w pixelach.
  • data-wow-iteration - liczba powtórzeń animacji.

 

Opcje te używamy w następujący sposób:

<div class="wow bounce box1" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">BOX1</div>

To już wszystko w tym poradniku, mam nadzieję, że ten modny i ciekawy efekt znajdzie zastosowanie na waszych stronach i oczywiście podniesie na nich konwersję.

Edytowane przez arctura12
  • Super 9

„Jeśli sądzisz, że potrafisz to masz rację. Jeśli sądzisz, że nie potrafisz - również masz rację” - Henry Ford

Odnośnik do komentarza

Dołącz do nas za darmo i naucz się zarabiać!

  • Dostęp do darmowych poradników pokazujących krok po kroku jak zarabiać w Internecie
  • Sposoby zarabiania niepublikowane nigdzie indziej
  • Aktywna społeczność, która pomoże Ci rozwiązać problemy i doradzi
  • Profesjonalne treści na temat SEO, social media, afiliacji, kryptowalut, sztucznej inteligencji i wiele więcej!

 

 

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
Tematy
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Ta strona korzysta z ciasteczek, aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie z witryny oznacza zgodę na ich wykorzystanie. Polityka prywatności .

  I accept