p Увеличение чисел на jquery при прокрутке до блока — Данил Самигуллин
+7 982 100 5 999

Увеличение чисел на jquery при прокрутке до блока

  • Главная
  • Блог
  • Увеличение чисел на jquery при прокрутке до блока

HTML

<div id="counter">
    <div class="counter-value" data-count="300">0</div>
    <div class="counter-value" data-count="400">100</div>
    <div class="counter-value" data-count="1500">200</div>
</div>

Jquery

$(document).ready(function () {
    var a = 0;
    $(window).scroll(function () {
        var oTop = $(".results_block").offset().top - window.innerHeight;
        if (a == 0 && $(window).scrollTop() > oTop) {
            $(".counter-value").each(function () {
                var $this = $(this),
                    countTo = $this.attr("data-count");
                $({
                    countNum: $this.text(),
                }).animate(
                    {
                        countNum: countTo,
                    },
                    {
                        duration: 1500,
                        easing: "swing",
                        step: function () {
                            $this.text(Math.floor(this.countNum));
                        },
                        complete: function () {
                            $this.text(this.countNum);
                        },
                    }
                );
            });
            a = 1;
        }
    });
});