Как при плавном увеличении чисел, уменьшать скорость при подходе к концу

Question

есть число 150. Происходит плавное увеличение с 0 до 150, но скорость от 0 до 150 одинаковая, а как сделать так, чтобы допустим до 130 была скорость одна, а уже до 150 она уменьшалась?

    function playNumber(selector) {
        
        const number = document.querySelector(selector);
        const time = 5000;
        const step = 2;
        let box = number.getBoundingClientRect();
        let isRun = false;
        function outNum(selectorNumber,num) {
            let e = document.querySelector(selectorNumber);
            let n = 0;
            let t = Math.round(time / (num / step));
            let interval = setInterval(() => {
                n = n + step;
                if (n == num) {
                    clearInterval(interval);
                }
                e.innerHTML = n;
            }, t);
        }
        window.addEventListener('scroll', () => {
            if (window.pageYOffset >= box.top - document.documentElement.clientHeight && !isRun) {
                outNum('.numberOne', 150);
                outNum('.numberTwo', 1000);
                isRun = true;      
            } 
        });
    }

    playNumber('.numberOne');
    playNumber('.numberTwo');

<div class="service__info">
        <div class="container">

            <h2 class="h2 service__info__title">Основная информация</h2>
            <div class="service__info__inner">
                <div class="service__info__inner__left">
                    <p class="p__light service__info__inner__left__text">SMM – это социальный маркетинг, отличающийся результативностью продвижения товаров и услуг среди заинтересованных потребителей. Социальные сети давно стали удобным и простым способом привлечения целевой аудитории. На страницах в интернете, где люди привыкли оценивать разную информацию, вступать в группы по интересам, рекламные объявления будут приносить хороший результат.</p>
                    <p class="p__light service__info__inner__left__text">Однако SMM продвижение отличается от других видов интернет-маркетинга. Не разбираясь в специфике такой рекламы, пользователи совершают множество ошибок, тратя деньги впустую. Поэтому все мероприятия по настройке и запуску проекта лучше доверить профессионалам, которые знают все тонкости привлечения целевой аудитории для увеличения конверсии и популяризации товаров и услуг.</p>
                </div>
                <div class="service__info__inner__right">
                    <div class="service__info__inner__right__one">
                        <p class="service__info__inner__right__number"><span class="numberOne">0</span>%</p>
                        <p class="service__info__inner__right__text">увеличение прибылей при грамотном использовании соцсетей</p>
                    </div>
                    <div class="service__info__inner__right__two">
                        <p class="service__info__inner__right__number"><span class="numberTwo">0</span>+</p>
                        <p class="service__info__inner__right__text">новых клиентов приходят через соцсети каждый месяц</p>
                    </div>
                </div>
            </div>

        </div><!-- /container -->
    </div><!-- /service__info -->

Answer 1

Можно так, в идеале конечно немного зерефачить чтобы избежать повторения, но работать будет. t*2 это то насколько мы замедляем таймер

function playNumber(selector) {
    
    const number = document.querySelector(selector);
    const time = 5000;
    const step = 2;
    let box = number.getBoundingClientRect();
    let isRun = false;
    function outNum(selectorNumber,num, n = 0) {
        let e = document.querySelector(selectorNumber);
        let t = Math.round(time / (num / step));
        let interval = setInterval(() => {
            n = n + step;
            if (n > 130) {
                clearInterval(interval);
                let interva2 = setInterval(() => {
                    n = n + step;
                    if (n == num) {
                        clearInterval(interva2);
                    }
                    e.innerHTML = n;
                 }, t*2)
            }
            if (n == num) {
                clearInterval(interval);
            }
            e.innerHTML = n;
        }, t);
    }
    window.addEventListener('scroll', () => {
        if (true) {
            outNum('.numberOne', 150);
            outNum('.numberTwo', 1000);
            isRun = true;      
        } 
    });
}

playNumber('.numberOne');
playNumber('.numberTwo');

БЛОГ НА HUSL

Как при плавном увеличении чисел, уменьшать скорость при подходе к концу

Ответы (1 шт):