jQuery ile Eklentisiz Counter-up Yapmak

Öncelikle counter-up ne derseniz, hani 1000 değeriniz vardır ve sayfa açıldığında 0'dan 1000'e kadar belli bir sürede sayarak numaraları gösterir. İşte buna counter-up diyoruz. Bunun tam tersi countdown ancak konumuz bu değil :)

Bunun için ben de daha önce poo.js adında bir eklenti yazmıştım. Ancak jquery'de bunu eklentisiz yapmanın yollarıda var.

İlk olarak prop() ile bir özellik tanımlıyoruz ve animate() ile bu özelliğe değer atayıp daha sonra bunu belli bir sürede animasyon işlemi uygulayarak saydırıyoruz.

Örneğin şöyle bir html'imiz olsun.

<span class="counter" data-counter="1000000"></span>

şimdi jquery'de tüm .counter-up sınıfına sahip elemanları seçip işlemi uygulayalım.

$('.counter').each(function () {
    $(this).prop('counter', 0).animate({
        counter: $(this).data('counter')
    }, {
        duration: 3500,
        easing: 'swing',
        step: (step) => {
            $(this).text(Math.ceil(step));
        }
    })
});

Sayılar küsüratlı geldiği için Math.ceil() ile yuvarlayarak gösteriyoruz.

Ayrıca burada duration yani süreyi ve sayıya format işleminide yine data- nitelikleri ile belirleyebilirdik. İsterseniz bir de ek olarak numaranın başına prefix ve sonuna suffix ayarları belirleyelim. Ek olarak animasyona bir delay (gecikme) de ekleyebiliriz. HTML'imiz şöyle olsun;

<span class="counter" data-counter="5000000" data-prefix="$" data-suffix="/cm2" data-duration="2000" data-format="tr-TR" data-delay="2000"></span>

Ve gerekli kontrolleri şöyle dönüştürelim. Bu arada animasyon işlemi bittiğini anlamak için complete özelliğini kullanabiliriz.

$('.counter').each(function () {
    $(this).prop('counter', 0).stop().delay($(this).data('delay') || 0).animate({
        counter: $(this).data('counter')
    }, {
        duration: $(this).data('duration') || 3500,
        easing: 'swing',
        step: (step) => {
            step = Math.ceil(step);
            let format = $(this).data('format');
            if (format) {
                step = number.toLocaleString(format);
            }
            let prefix = $(this).data('prefix');
            if (prefix) {
                step = `${prefix} ${step}`;
            }
            let suffix = $(this).data('suffix');
            if (suffix) {
                step = `${step} ${suffix}`;
            }
            $(this).html(number)
        },
        complete: () => {
            console.log('İşlem bitti');
        }
    })
});

Sonuç ise;