Heiligenweb | Tilda & Low-Code

👩‍💻

Анимация перебора чисел при скролле

Считаем от 0 до нужного числа при скролле. Без дополнительных библиотек.

<!-- Подключаем jQuery — без него анимация работать не будет.
Если jQuery уже подключён на странице, эту строку можно не добавлять -->
<script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script>

<script>
$(function () {

    // Массив с настройками для каждого счётчика
    // Пояснение:
    // [0] — класс блока (без точки)
    // [1] — до какого числа считать
    // [2] — текст, который появится после числа (если нужно)
    // [3] — на каком расстоянии до блока запустить анимацию
    // [4] — сколько по времени идёт анимация (в миллисекундах)
    const items = [
        ['num_1', 10, '', 100, 650],
        ['num_2', 246, '', 100, 750],
        ['num_3', 357, '', 100, 800]
    ];

    // Перебираем каждый блок
    items.forEach(elArr => {

        let animated = false; // переменная, чтобы анимация запустилась только один раз

        // Находим элемент по классу + добавляем .tn-atom (это нужно, если число находится внутри стандартного блока Tilda)
        const $el = $('.' + elArr[0] + ' .tn-atom');

        // Слушаем событие скролла
        $(window).on('scroll', () => {

            // Если анимация уже была — выходим
            if (animated) return;

            // Считаем, когда блок попадает в зону видимости (с учётом отступа elArr[3])
            const triggerPoint = $el.offset().top - $(window).height() + elArr[3];

            // Проверяем, достигли ли нужной позиции на странице
            if ($(window).scrollTop() > triggerPoint) {
                animated = true; // чтобы не запускалось снова при скролле вверх-вниз

                // Анимируем число от 0 до заданного значения
                $({ val: 0 }).animate({ val: elArr[1] }, {
                    duration: elArr[4], // сколько длится анимация
                    easing: 'swing',    // тип анимации (плавная)
                    
                    // На каждом шаге обновляем содержимое блока
                    step(val) {
                        $el.html(
                            String(Math.ceil(val)) // округляем до целого вверх
                                .replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ') // добавляем пробелы в больших числах: 1000 → 1 000
                                + ' ' + elArr[2] // добавляем подпись (если есть)
                        );
                    }
                });
            }
        });
    });

});
</script>

На что обратить внимание при верстке:

— У блока с числом должно быть достаточно ширины, чтобы в нем поместилось финальное значение (ширину лучше выставить вручную).
— Стартовое число (0) лучше выравнивать по правому краю, чтобы анимация выглядела стабильно.
— Для верстки используйте класс .num_1, .num_2 и так далее — имя класса вы указываете для блока с числом при верстке и добавляете в массив.

Если нужно адаптировать под свой макет — просто добавьте или измените строку в массиве. Скрипт сам всё обработает. Без дублирования кода.

Please open Telegram to view this post