Skocz do zawartości

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

arctura12

Przez arctura12,
w Webmastering i grafika

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

Zarejestruj się za darmo i naucz się zarabiać online!

  • 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

  • Polecana zawartość

    • Poradnik podatkowy - jak rozliczać się z pieniędzy zarobionych przez Internet bez DG?

      Poradnik podatkowy - jak rozliczać się z pieniędzy zarobionych przez Internet bez DG?

      mysc opublikował(a) temat w Podatki, prawo, własna firma,

      Zarabianie w Internecie wiąże się z koniecznością płacenia podatków - a rozliczanie się z urzędem skarbowym nie jest jednoznaczne i proste. Prawo podatkowe w Polsce jest nieujednolicone - co oznacza, że każdy urząd skarbowy może mieć inne interpretacje. Sprawdź jak się za to zabrać!
        • Lubię to!
        • Super
      • 12 odpowiedzi
      mysc

      Wybrany przez

      mysc,
    • JDG - Jak zarejestrować, rozliczać i prowadzić działalność gospodarczą w Polsce

      JDG - Jak zarejestrować, rozliczać i prowadzić działalność gospodarczą w Polsce

      mysc opublikował(a) temat w Podatki, prawo, własna firma,

      Jednoosobowa działalność gospodarcza (JDG) to najprostsza forma prowadzenia działalności gospodarczej w Polsce. Jest to działalność prowadzona przez jedną osobę fizyczną na własne nazwisko i na własne ryzyko. Jednak mimo, że nazywa się jednoosobowa - daje jednak możliwość zatrudniania pracowników. Takich firm jest zarejestrowanych w Polsce zdecydowanie najwięcej. Sprawdź jak zarejestrować, rozliczać i prowadzić własną JDG!
        • Super
      • 3 odpowiedzi
      mysc

      Wybrany przez

      mysc,
    • Inwestowanie w obligacje detaliczne skarbu państwa - od podstaw!

      Inwestowanie w obligacje detaliczne skarbu państwa - od podstaw!

      mysc opublikował(a) temat w Inwestowanie i oszczędzanie,

      Sprawdź jak inwestować w obligacje skarbowe - krok po kroku! Detaliczne obligacje skarbowe to rodzaj obligacji emitowanych przez Państwo, które są oferowane indywidualnym inwestorom, takim jak osoby fizyczne, a nie instytucjom finansowym.

      Są to instrumenty dłużne, nienotowane na żadnym rynku, co oznacza że kupując taką obligację, w praktyce pożyczasz pieniądze państwu na określony czas, a w zamian otrzymujesz odsetki. Można więc powiedzieć że obligacje są indywidualną pożyczką na określony % dla Skarbu Państwa. Państwo odda Ci więcej niż od Ciebie pożyczyło.
        • Super
      • 7 odpowiedzi
      mysc

      Wybrany przez

      mysc,
    • Jak pozyskiwać i zarabiać na poleconych dzięki make-cash.pl

      Jak pozyskiwać i zarabiać na poleconych dzięki make-cash.pl

      mysc opublikował(a) temat w Poradniki CPA,

      W tym poradniku przedstawiam możliwości dostępne dla każdego użytkownika. Dowiesz się jak efektywnie wykorzystać forum do zbierania poleconych i budowania dodatkowych zysków.

      Make-cash.pl to miejsce, gdzie ludzie dzielą się swoimi doświadczeniami, poszukują porad i rekomendacji, a także nawiązują wartościowe kontakty. Codziennie odwiedza nas minimum 2000 unikalnych osób, które są zainteresowane zarabianiem przez Internet - a to ogromny potencjał, z którego może korzystać nie tylko administracja - ale każdy użytkownik forum !
        • Super
      • 2 odpowiedzi
      mysc

      Wybrany przez

      mysc,
    • Jak pisać treści na stronę internetową z wykorzystaniem AI

      Jak pisać treści na stronę internetową z wykorzystaniem AI

      Wujek Ziemny opublikował(a) temat w Case Study i Poradniki SEO,

      Tworzenie treści od podstaw może być procesem czasochłonnym. Istnieje wiele mniejszych kroków, o których należy pomyśleć w drodze do stworzenia atrakcyjnych treści, takich jak badanie rynku, SEO i redagowanie tekstu, a to tylko początek. Jednak nie musisz zaczynać od zera, gdy istnieją narzędzia AI, które mogą pomóc w tworzeniu wysokiej jakości treści. 
        • Dzięki!
        • Super
      • 13 odpowiedzi
      Ciamciaj

      Wybrany przez

      Ciamciaj,
    Wyświetl wszystko
×
×
  • 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 .

  Akceptuję