Cara menggunakan membuat counter dengan javascript

Taufiksi – Kita akan mencoba membuat animasi counter angka. Animasi ini akan berguna untuk beberapa project yang ingin kamu buat kedepannya.

Bahkan saya juga ingin menggunakannya kedalam salah satu project tutorial landing page menggunakan bootstrap nantinya.

Untuk membuat animasi ini kamu hanya memerlukan beberapa tools seperti yang pastinya teks editor dan browser.

Tapi yang lebih penting project yang kamu miliki sudah terinstall jquery terlebih dahulu, tidak menginstal juga tidak apa apa asalkan sudah ada kode CDN di dalamnya.

Kamu bisa menemukan CDN jquery disini dan bisa memilih sesuai versi yang kamu ingin gunakan, mungkin lebih baik versi yang terbarunya.

Pasangkan kode jquery di dalam tag ... , jika sudah maka kamu akan siap untuk ngoding membuat animasi counter angka.

Isi Artikel

• 1 Membuat Animasi Counter Angka
  • 1.1 Javascript
  • 1.2 HTML
• 2 Penjelasan Kode Animasi Counter Angka

Kita akan mulai mmebuat animasinya, usahakan projectmu sudah ada jquery terlebih dahulu. Kemudian kamu hanya tinggal memasukan kode berikut ini.

Javascript

jQuery({ Counter: 0 }).animate({
    Counter: jQuery('.counter').text()
  }, {
    duration: 10000,
    easing: 'swing',
    step: function() {
      jQuery('.counter').text(Math.ceil(this.Counter).toLocaleString('id'));
    }  
});

HTML

7000

Penjelasan Kode Animasi Counter Angka

Jadi kalau kamu sudah melihat kode tersebut kan, untuk kode javascript kamu bisa memasukannya kedalam file js secara terpisah maupun dalam satu file yang di bungkus dengan tag

kode javascript

Reply 7 0 Chia sẻ