Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Как сделать плавный рост значения чисел в ZeroBlock для Tilda
hair salon . barbershop
SELF CONFIDENCE . GROOMING . LIFE STYLE
WELCOME TO BARBER HAIR SALON AND BARBERSHOP GROOMING LIFE STYLE AND SELF CONFIDNCE

We create new business approach
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book galley of type and scrambled .
Number of tutors helping students
to improve their English
Have already joined us to study English using Skype
An average score of IELTS, passed by our students
1900
pl
99
ms
24
Course in numbers
The best way to improve your professional skills and increase your value

Как сделать плавный рост значения чисел в ZeroBlock для Tilda

1
Создали ZeroBlock и добавили в него элемент Text с классом animation-num
2
Прописали в этот текст конечные цифры, что будут после анимации
3
Добавили код в блок Другое - Т123
Библиотека для примера
<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>
Made on
Tilda