Contadores en portada

site.js

@@ -72,3 +72,75 @@ jQuery(document).ready(function($) {
 	//~ }
 	
 });
+
+// Función para animar un contador individual
+function animateCounter(element, target, duration = 2000) {
+	const start = 0;
+	const increment = target / (duration / 16); // 60 FPS
+	let current = start;
+	
+	const timer = setInterval(() => {
+		current += increment;
+		if (current >= target) {
+			element.textContent = target.toLocaleString();
+			clearInterval(timer);
+		} else {
+			element.textContent = Math.floor(current).toLocaleString();
+		}
+	}, 16);
+}
+
+// Función para iniciar todos los contadores
+function startCounters() {
+	const counters = document.querySelectorAll('.counter');
+	
+	counters.forEach((counter, index) => {
+		const target = parseInt(counter.getAttribute('data-target'));
+		
+		// Añadir un pequeño retraso entre cada contador para un efecto escalonado
+		setTimeout(() => {
+			animateCounter(counter, target);
+		}, index * 200);
+	});
+}
+
+// Configurar el Intersection Observer
+const observer = new IntersectionObserver((entries) => {
+	entries.forEach(entry => {
+		if (entry.isIntersecting) {
+			// Añadir clase de animación al contenedor
+			entry.target.classList.add('animate');
+			
+			// Iniciar contadores después de un pequeño retraso
+			setTimeout(() => {
+				startCounters();
+			}, 300);
+			
+			// Dejar de observar una vez que se ha activado
+			observer.unobserve(entry.target);
+		}
+	});
+}, {
+	threshold: 0.3, // Se activa cuando el 30% del elemento es visible
+	rootMargin: '-50px' // Margen adicional para un mejor control
+});
+
+// Iniciar la observación cuando el DOM esté listo
+document.addEventListener('DOMContentLoaded', () => {
+	const counterContainer = document.getElementById('counterContainer');
+	observer.observe(counterContainer);
+});
+
+// Función opcional para reiniciar los contadores (útil para testing)
+function resetCounters() {
+	const counters = document.querySelectorAll('.counter');
+	counters.forEach(counter => {
+		counter.textContent = '0';
+	});
+	
+	const container = document.getElementById('counterContainer');
+	container.classList.remove('animate');
+	
+	// Reiniciar la observación
+	observer.observe(container);
+}