【JavaScript】表示位置にきたらカウントアップするスクリプト

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

---

<div class="js-countup">1990</div>

function numberCountUp() {
    var selector = '.js-countup';     // 対象のDOMのセレクタ
    var $years = $(selector);
    $years.each(function () {
        var year = $(this).text();
        $(this).text(year - 80);
        var tempyear = year - 80;
        var self = this;
        var scrollStart = function () {
            if (( $(self).offset().top - 700) < $(window).scrollTop()) {
                var interval = setInterval(function () {
                    if (tempyear < year) {
                        tempyear++;
                        $(self).text(tempyear);
                    } else {
                        clearInterval(interval);
                        return false;
                    }
                }, 15)
            } else {
                window.requestAnimationFrame(scrollStart)
            }
        }
        window.requestAnimationFrame(scrollStart)
    });
}
$(function(){
    numberCountUp();
})

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】