Odliczanie do wskazanej liczby

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:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Odliczanie</title>
<link rel="stylesheet" type="text/css" href="reset.css" media="screen">

<section class="timer">

  <div class="section-title">
      <div class="container">
          <h2>Statystyki</h2>
          <img src="bar.png" alt=""/>
    	</div>
  </div>

  <div class="container">
		
     <div class="single-col">
        <h3><span class="count" data-from="0" data-to="5200" data-speed="2000"></h3>
        <h4>GODZIN PRACY</h4>
     </div>

     <div class="single-col">
        <h3><span class="count" data-from="0" data-to="153" data-speed="2000"></h3>
        <h4>ZREALIZOWANYCH PROJEKTÓW</h4>
     </div>

     <div class="single-col">
        <h3><span class="count" data-from="0" data-to="89" data-speed="2000"></h3>
        <h4>ZADOWOLONYCH KLIENTÓW</h4>
     </div>

     <div class="single-col">
        <h3><span class="count" data-from="0" data-to="5" data-speed="2000"></h3>
        <h4>LAT DZIAŁALNOŚCI</h4>
     </div>
    
   </div>

</section>

</body>
</html>

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:

body {
	font-family: "Roboto Slab", serif;
	background: #ccc;
}

.timer {
	min-height: 880px;;
	width: 100%;
	background: url('background.jpg') no-repeat;
	background-size: cover;
	background-position: top center;
	text-align: center;
}

.container {
	max-width: 1300px;
	margin: 0 auto;
	clear: both;
}

.section-title h2 {
	color: #0eb493;
	font-size: 38px;
	font-weight: 100;
	padding-top: 100px;
	margin-bottom: 10px;
}

.single-col {
	width: 25%;
	float: left;
}

.single-col h3 {
	font-size: 58px;
	color: #fff;
	font-weight: 100;
	margin-top: 200px;
}

.single-col h4 {
	font-size: 18px;
	color: #fff;
	font-weight: 100;
}

@media screen and (max-width: 850px) {
	.single-col {
		width: 50%;
		float: left;
	}

	.single-col h3 {
		margin-top: 100px;
	}
}

@media screen and (max-width: 400px) {
	.single-col {
		width: 100%;
		float: left;
	}
}

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

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.countTo.js"></script>

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

<script>
   $(document).ready(function(){

      $('.count').countTo();

   });
</script>

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.

Autor

Bartłomiej Mąkina

View Comments

Tomasz Mikoluk
Odpowiedz

08/02/2018

Witam,
Skrypt jest bardzo fajny i działa jak należy ale mam jedno pytanie co musiałbym dopisać aby skrypt zaczął działać w momencie gdy się przewinie (wyświetli) strona do danej sekcji w której znajduje się ów skrypt?

Strona typu one page a sekcja z tym licznikiem ładuje się od razu i w momencie przewinięcia się strony do danej sekcji skrypt jest już wykonany.
Marcin
Odpowiedz

13/09/2016

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

12/09/2016

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
  Odpowiedz
  
  12/09/2016
  
  Cześć. Upewnij się, że:
  
  1. Podłączyłeś jQuery przed jquery.countTo.js.
  2. Podłączyłeś tą samą wersję jQuery.
ccc
Odpowiedz

12/09/2016

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…

Mobilne menu ze Slicknav.js

Jak zrobić karuzelę z owlCarousel

11 przydatnych snippetów jQuery, które powinien znać każdy Webmaster