close
fashion-wristwatch-time-watch

W tym wpisie pokaże Ci jak przy użyciu wtyczki countTo zrobić prosty licznik, który wykona odliczanie w podanym zakresie i w określonym czasie.

Na początku stwórzmy prosty szkielet HTML, który następnie ostylujemy i podepniemy wtyczkę countTo aby uruchomić licznik:

Wewnątrz głównej sekcji znajduje się div o klasie section-title, który przechowuje tytuł sekcji oraz obrazek. Poniżej znajduje się kolejny div, tym razem z klasą container zawierający cztery kolejne divy – kolumny. Najważniejszym elementem są znaczniki span, a konkretnie ich klasa i atrybuty. Klasy użyjemy przy wywołaniu funkcji w Javascript. Atrybuty to:

  • data-from – liczba, od której rozpocznie się odliczanie
  • data-to – liczba, na której odliczanie się zakończy
  • data-speed – czas odliczania w milisekundach (1000 milisekund = 1 sekunda)

Dodajmy teraz kilka prostych reguł CSS:

Najważniejszymi regułami są te dotyczące klasy timer (dodanie tła oraz wymiarów sekcji), container (dodanie wymiarów głównego kontenera) oraz single-col (responsywny rozkład kolumn). Na końcu dodane są też dwie reguły media queries, które przy niższych rozdzielczościach zmieniają układ kolumn.

Wtyczkę możesz pobrać klikając w ten link a następnie klikając Download ZIP. Pobierze się archiwum, z którego potrzebujemy jeden plik – jquery.countTo.js. Podłączmy go teraz przed zamykającym znacznikiem </body> wraz z biblioteką jQuery (jest niezbędna do działania wtyczki).

Zaraz pod tymi dwoma linijkami możemy aktywować wtyczkę:

Funkcję countTo wywołujemy na elemencie, wewnątrz którego zostanie załadowany licznik (w naszym przypadku span o klasie count).

I to wszystko. Odliczanie już działa 🙂

Przykład możesz zobaczyć tutaj.

Paczkę możesz pobrać tutaj.

 

 

Tags : countTojquerylicznikodliczanie
  • Marcin

    jQuery.noconflict(); załatwił sprawę 😉

  • Marcin

    Mam kłopot z implementacją skryptu na mojej stronie. Próba inicjalizacji skryptu kończy się wyświetleniem błędu, że (…) .countTo is not a function. Na gołej stronie (bez żadnych innych skryptów) licznik działa. Oprócz CountTo używam jeszcze slidera rSlides, ale wyłączając go z kodu nie wpływa to w żaden sposób na dzianie CountTo. Jakiś pomysł dlaczego tak się może dziać?

    Pozdrawiam

    • Bartłomiej Mąkina

      Cześć. Upewnij się, że:

      1. Podłączyłeś jQuery przed jquery.countTo.js.
      2. Podłączyłeś tą samą wersję jQuery.

  • ccc

    countTo is not a function. ni cholery nie mogę tego zaimplementować. nawet robiąc copy+paste źródła dema. wszystkie pliki podpięte prawidłowo, ale nie chce działać. Plik z demem lokalnie działa normalnie…