ページをスクロールして該当箇所に来たら毎回0から1,000までカウントアップするjavascriptコードを紹介

<span class="count-up-no" data-from="14500" data-to="15000" data-duration="2000">15,000</span> 件

const elements = document.querySelectorAll('.count-up-no');
const observers = [];

elements.forEach((element, index) => {
    let counting = false;
    let start, end, duration;

    const observer = new IntersectionObserver(function (entries) {
        if (entries[0].isIntersecting === true) {
            if (!counting) {
                counting = true;
                start = parseInt(element.dataset.from);
                end = parseInt(element.dataset.to);
                duration = parseInt(element.dataset.duration);
                countUp(start, end, duration, element);
            }
        } else {
            counting = false;
            element.innerText = start.toLocaleString();
        }
    }, { threshold: [0] });

    observers.push(observer);
    observer.observe(element);
});

function countUp(start, end, duration, element) {
    let current = start;
    let range = end - start;
    let increment = end > start ? 1 : -1;
    let stepTime = Math.abs(Math.floor(duration / range));

    let timer = setInterval(function () {
        current += increment;
        element.textContent = current.toLocaleString();
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

<!-- wp:loos/columns {"colPC":"3","colTab":"3","className":"swl-number-of-cases"} -->
<div class="swell-block-columns swl-number-of-cases" style="--clmn-w--pc:33.33%;--clmn-w--tab:33.33%"><div class="swell-block-columns__inner"><!-- wp:loos/column {"colWidth":{}} -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:group {"backgroundColor":"white","className":"swl-number-of-cases-box is-style-crease","layout":{"type":"constrained"}} -->
<div class="wp-block-group swl-number-of-cases-box is-style-crease has-white-background-color has-background"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong><span class="swl-fz u-fz-xl">サイト納品</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="count-up-box"><span class="count-up-no" data-from="14500" data-to="15000" data-duration="2000">15,000</span> <span class="count-up-text">件</span></div>
<!-- /wp:html -->

<!-- wp:paragraph {"align":"center","fontSize":"xs"} -->
<p class="has-text-align-center has-xs-font-size">※累計の実績</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:group {"backgroundColor":"white","className":"swl-number-of-cases-box is-style-crease","layout":{"type":"constrained"}} -->
<div class="wp-block-group swl-number-of-cases-box is-style-crease has-white-background-color has-background"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong><span class="swl-fz u-fz-xl">依頼数</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="count-up-box"><span class="count-up-no" data-from="2500" data-to="3000" data-duration="2000">3,000</span> <span class="count-up-text">件</span></div>
<!-- /wp:html -->

<!-- wp:paragraph {"align":"center","fontSize":"xs"} -->
<p class="has-text-align-center has-xs-font-size">※累計の実績</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:loos/column -->

<!-- wp:loos/column -->
<div class="swell-block-column swl-has-mb--s"><!-- wp:group {"backgroundColor":"white","className":"swl-number-of-cases-box is-style-crease","layout":{"type":"constrained"}} -->
<div class="wp-block-group swl-number-of-cases-box is-style-crease has-white-background-color has-background"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong><span class="swl-fz u-fz-xl">顧客満足度</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<div class="count-up-box"><span class="count-up-no" data-from="0" data-to="98" data-duration="2000">98</span> <span class="count-up-text">%</span></div>
<!-- /wp:html -->

<!-- wp:paragraph {"align":"center","fontSize":"xs"} -->
<p class="has-text-align-center has-xs-font-size">※納品後のアンケート結果</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:loos/column --></div></div>
<!-- /wp:loos/columns -->

/* カウント文字装飾 */
.swl-number-of-cases .count-up-box {
    text-align: center;
}
.swl-number-of-cases .count-up-box .count-up-no {
    font-size: 2em;
    font-weight: 700;
    color: #fd7132;
}
.swl-number-of-cases .count-up-box .count-up-text {
    font-size: 1em;
}

/** 中ボックス余白修正 **/
.swl-number-of-cases .swl-number-of-cases-box .wp-block-group__inner-container div,
.swl-number-of-cases .swl-number-of-cases-box .wp-block-group__inner-container p {
    margin-bottom: 0em !important;
}

以下の全ての条件を含んだコードを教えて
htmlにデータ属性のfromとtoを付与し、その値をjavascriptで取得しfromからtoまでカウントアップする
該当箇所から外れたら毎回カウントをリセットして、再度表示したらカウントアップを始める
カウントを増やすDurationを指定できる
<span class="count-up-no"></span>で使い回しが出来る
scrollを使わずIntersectionObserverを使う
1000を超す値は1,000と,区切りを行う