Znajdź zawartość
Wyświetlanie wyników dla tagów 'efekty na stronę' .
Znaleziono 1 wynik
-
Poradnik Efekt WOW na twojej stronie - zwiększa konwersję!
arctura12 opublikował(a) temat w Webmastering i grafika
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ę.
