<script>
document.addEventListener("DOMContentLoaded", function() {
(function () {
function animateNumbers() {
const offset = -50; // На сколько пикселей позже начать анимацию
const duration = 2000; // Длительность анимации в миллисекундах
const elements = document.querySelectorAll('.animation-num .tn-atom');
if (elements.length === 0) return;
const items = [];
elements.forEach(element => {
const originalText = element.textContent;
const numberMatch = originalText.match(/[\d,.\s]+/);
if (!numberMatch) return;
const numberStr = numberMatch[0].replace(/[\s,]/g, '');
const targetNumber = parseFloat(numberStr);
if (isNaN(targetNumber)) return;
const numberStart = originalText.indexOf(numberMatch[0]);
const numberEnd = numberStart + numberMatch[0].length;
const prefix = originalText.substring(0, numberStart);
const suffix = originalText.substring(numberEnd);
element.dataset.original = originalText;
items.push({
element,
targetNumber,
prefix,
suffix,
hasAnimated: false,
originalNumber: numberStr
});
element.textContent = prefix + '0' + suffix;
});
function formatNumber(num) {
return Math.floor(num).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}
function isElementVisible(element) {
const rect = element.getBoundingClientRect();
const windowHeight = window.innerHeight;
return (
rect.top <= windowHeight + offset &&
rect.bottom >= -offset
);
}
function animateItem(item) {
if (item.hasAnimated) return;
item.hasAnimated = true;
const startTime = Date.now();
const endTime = startTime + duration;
const startValue = 0;
const endValue = item.targetNumber;
function update() {
const now = Date.now();
const progress = Math.min((now - startTime) / duration, 1);
const easeProgress = progress < 0.5
? 2 * progress * progress
: -1 + (4 - 2 * progress) * progress;
const currentValue = startValue + (endValue - startValue) * easeProgress;
item.element.textContent = item.prefix + formatNumber(currentValue) + item.suffix;
if (progress < 1) {
requestAnimationFrame(update);
} else {
item.element.textContent = item.prefix + formatNumber(endValue) + item.suffix;
}
}
requestAnimationFrame(update);
}
function checkAllElements() {
items.forEach(item => {
if (!item.hasAnimated && isElementVisible(item.element)) {
animateItem(item);
}
});
}
let scrollTimeout;
window.addEventListener('scroll', () => {
if (scrollTimeout) {
clearTimeout(scrollTimeout);
}
scrollTimeout = setTimeout(checkAllElements, 50);
}, { passive: true });
setTimeout(checkAllElements, 100);
window.addEventListener('resize', checkAllElements);
}
animateNumbers();
})();
});
</script>