animasi counter angka

Cara Membuat Animasi Counter Angka Menggunakan JS

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.

Mulai Online-kan Projectmu

Udah ngodingnya capek, tapi masih di localhost ? tenang, yang kamu perlukan hanya uploud project ke hosting agar bisa diakses orang lain. Beli hosting sekarang dan dapatkan domain gratis.

Beli Hosting

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

Membuat 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

<span class="counter">7000</span>

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 <script>.

Sedangkan untuk yang HTML kamu bisa mengkombinasikan dengan berbagai tag html, tidak hanya menggunakan span, asalkan dilengkapi dengan class counter sebagai targetnya.

Penjelasan kode javascript sebagai berikut.

  • Counter: 0 merupakan angka awal untuk menuju ke angka 7000 yang ada di kode HTML.
  • .counter adalah sebuah class yang kita tambahkan pada tag html sebagai penanda target script
  • duration :10000 adalah rentang waktu yang dibutuhkan untuk mencounter angka, atau bisa dibilang untuk menyelesaikan animasi, jika durasi 10000 maka artinya adalah animasi akan selesai sekitar 10 detik.
  • easing : swing adalah model animasi yang digunakan. Ada beberapa animasi yaitu linier dan swing, kamu bisa melihat selengkapnya di sini.
  • .toLocaleString(‘id’) adalah sebuah kode untuk merubah angka mengikuti standar indonesia. Misalnya menggunakan pemisah seperti koma dan lain lain.

Penutup

Baiklah mungkin sampai sini dulu artikel kali ini, sampai jumpa di artikel berikutnya babay.




Terima kasih sudah membaca artikelnya, tetap semangat jalani harimu meskipun dunia bertolak belakang dengan keinginanmu. Dan jangan lupa ngopi supaya sadar pahitnya dunia tidak semanis mimpi. Ahay

Tertanda Sayang


Taufik Nurhidayah
Traktir Kopi

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.