MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【JavaScript】表示位置にきたらカウントアップするスクリプト

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

公開日:2019年08月02日
最終更新日:2019年08月02日
オンスタ運営
ホーム > スニペット > 【JavaScript】表示位置にきたらカウントアップするスクリプト
このエントリーをはてなブックマークに追加
<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();
})
 

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。