
„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.
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ślnie0
).data-counter-step
– wielkość kroku licznika (domyślnie1
).data-counter-duration
– czas trwania animacji w milisekundach (domyślnie4000
ms).data-counter-before
idata-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.