PureJS Counter – Licznik w Czystym JavaScript

„PureJS Counter” to skrypt napisany w czystym JavaScript, który pozwala na animowane wyświetlanie liczb w elementach HTML, gdy te pojawiają się w polu widzenia użytkownika. Skrypt wykorzystuje API Intersection Observer, co czyni go wydajnym i zoptymalizowanym pod kątem zasobów. Nie wymaga żadnych zewnętrznych bibliotek, takich jak jQuery, co sprawia, że jest lekki i łatwy do zaimplementowania.

Poniżej szczegółowo opisuję działanie kodu.

PureJS Counter

Struktura skryptu

1. Nasłuchiwanie na zdarzenie DOMContentLoaded

Skrypt uruchamia się dopiero po załadowaniu całego drzewa DOM. Dzięki temu możemy mieć pewność, że elementy, na których pracujemy, są dostępne w dokumencie:

document.addEventListener("DOMContentLoaded", function() {

2. Funkcja counterStartUp

Główna funkcja odpowiedzialna za animację liczb. Przyjmuje jako parametr pojedynczy element HTML. Działa w kilku krokach:

a) Pobieranie parametrów

Funkcja odczytuje atrybuty elementu HTML, które definiują sposób działania licznika:

  • data-counter-start – wartość początkowa (domyślnie 0).
  • data-counter-step – wielkość kroku licznika (domyślnie 1).
  • data-counter-duration – czas trwania animacji w milisekundach (domyślnie 4000 ms).
  • data-counter-before i data-counter-after – tekst wyświetlany przed i po liczbie (np. "+", "%").
  • Wartość docelowa – odczytywana jako zawartość tekstowa elementu (np. <span>100</span>).
b) Obliczanie interwału

Na podstawie parametrów czasowych i zakresu licznika obliczana jest długość interwału:

let interval = Math.ceil(duration / (end - start) * step);

Dzięki temu licznik działa płynnie, niezależnie od zakresu liczb.

c) Animacja liczby

Za pomocą funkcji setInterval licznik jest zwiększany o wartość kroku (step) w ustalonych odstępach czasu. Po osiągnięciu wartości docelowej licznik jest zatrzymywany:

if (counter >= end) {
  counter = end; 
  clearInterval(intervalId);
}
d) Aktualizacja elementu

Podczas każdego kroku liczba jest aktualizowana w elemencie HTML z uwzględnieniem tekstu poprzedzającego i końcowego:

element.innerHTML = counterBefore + counter + counterAfter;

3. Intersection Observer

Aby zwiększyć wydajność, licznik jest aktywowany tylko wtedy, gdy dany element pojawi się w polu widzenia użytkownika. W tym celu wykorzystano Intersection Observer API:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      counterStartUp(entry.target);
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });
  • threshold: 0.5 – licznik uruchomi się, gdy co najmniej 50% elementu znajdzie się w widocznym obszarze.
  • observer.unobserve(entry.target) – po uruchomieniu licznika element zostaje usunięty z obserwacji, co oszczędza zasoby.

4. Inicjalizacja liczników

Skrypt wyszukuje wszystkie elementy HTML z atrybutem data-counter="true" i uruchamia na nich obserwatora:

document.querySelectorAll('[data-counter="true"]').forEach(function(element) {
  observer.observe(element);
});

Przykład HTML

Oto przykład użycia kodu w praktyce:

<div data-counter="true"  
     data-counter-start="0"  
     data-counter-step="5" 
     data-counter-duration="2000" 
     data-counter-before="+"  
     data-counter-after="%">
  100
</div>
  • Licznik rozpocznie się od 0.
  • Będzie wzrastał co 5.
  • Animacja potrwa 2000 ms.
  • Przed liczbą zostanie dodany znak "+", a po liczbie %.
  • Końcowa wartość wyniesie 100.

Zastosowania

Skrypt jest idealny do dynamicznego prezentowania statystyk, takich jak:

  • Liczba klientów lub użytkowników.
  • Wartości procentowe.
  • Dane liczbowe na stronach sprzedażowych.

Podsumowanie

„PureJS Counter” to wydajny i prosty w użyciu licznik w czystym JavaScript. Dzięki wykorzystaniu Intersection Observer API animacje są aktywowane tylko wtedy, gdy użytkownik faktycznie je widzi, co poprawia wydajność i UX. Ten kod jest uniwersalny, elastyczny i łatwy do dostosowania, co czyni go doskonałym narzędziem dla nowoczesnych stron internetowych.

Scroll to Top