0

Вот функция:

document.addEventListener('load', count())


function count() {
    document.querySelectorAll('.data-number').forEach((e) => {
        let currentNumber = 0
        let finalNumber = e.getAttribute('data-number')
        finalNumber = parseInt(finalNumber)
        let delay

        switch (true) {
            case (finalNumber < 30):
                delay = 100
                break
            case (finalNumber < 100):
                delay = 40
                break
            case (finalNumber < 300):
                delay = 10
                break
            default:
                delay = 50
                break
        }

        let increment = setInterval(() => {
            e.innerHTML = currentNumber
            if (currentNumber < finalNumber) {
                if (finalNumber > 1000) {
                    currentNumber += 100
                } else {
                    currentNumber++
                }
            } else {
                clearInterval(increment)
            }
        }, delay)
        increment
    })
}

Так же блок, в котором срабатывает скрипт, если нужно:

<div class="statistics" id="statistics">
        <div class="container">
            <div class="stat">
                <div class="stat__item">
                    <div class="data-number" data-number="84">84</div>
                    <div class="stat__text">Дизайнерских проекта</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="246">246</div>
                    <div class="stat__text">Довольных клиентов</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="15">15</div>
                    <div class="stat__text">Побед в номинаций</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="99">99</div>
                    <div class="stat__text">Чашек коффе</div>
                </div>
                <div class="stat__item">
                    <div class="data-number" data-number="24">24</div>
                    <div class="stat__text">Сотрудника</div>
                </div>
            </div>
        </div>
    </div>

1 ответ 1

-1

Посмотреть результат
Если вы используете ванильный js:

let target = document.querySelector('#statistics');
// top offset to element
let targetPos = target.getBoundingClientRect().top;
// window height
let winHeight = window.innerHeight;
// Really top offset to element
let scrollToElem = targetPos - winHeight;
// flag to check re-scroll
let flag = true;

document.addEventListener('scroll', () => {
    // if we scroll to element
    if (window.scrollY > scrollToElem && flag) {
        count(); flag = false;
    }
    // if we scroll to the element again, then everything will work again
    else if(window.scrollY < scrollToElem && !flag) { flag = true; }
});

Если вы используете jquery:

let target = $('#statistics');
let targetPos = target.offset().top;
let winHeight = $(window).height();
let scrollToElem = targetPos - winHeight;
let flag = true;

$(window).scroll(() => {
    if( $(this).scrollTop() > scrollToElem && flag ) {
        count(); flag = false;
    }
    else if( $(this).scrollTop() < scrollToElem && !flag) { flag = true; }
});
2
  • Огромное спасибо, я примерно так и представлял, но написать не смог, благодарю.
    – denvud
    22 ноя 2020 в 17:52
  • Пожалуйста) Поставьте галочку если ответ вам помог) 22 ноя 2020 в 18:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.