Javascript Animasi Angka

Kode Javascript untuk menampilkan angka hitung yang berjalan
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Updated: 9 Juni 2021

Kode javascript berikut berfungsi untuk menampilkan angka hitung yang berjalan. Script ini saya gunakan pada saat membantu project https://oeko-reiner.de yang menggunakan Oxygen Builder.

Contoh hasil

Counter Animation

Javascript

jQuery({ Counter: 4000 }).animate({
  Counter: jQuery('.counter').text()
}, {
  duration: 15000,
  easing: 'swing',
  step: function() {
    jQuery('.counter').text(Math.ceil(this.Counter).toLocaleString('de'));
  }  
});

HTML

<!-- contoh htmlnya animasi angka berjalan -->
<div>
 <p class="counter">2500</p>
</div>

Keterangan

counter : 4000 adalah angka terakhir yang akan dituju, dimulai dari angka yang kita buat yaitu 2500.

.counter adalah class yang kita tambahkan pada angka sebagai penanda target script.

duration : 15000 adalah waktu yang dibutuhkan untuk menyelesaikan animasi, yaitu 15000 ms atau 15 detik.

easing : swing adalah model animasi yang digunakan  (lihat: https://jqueryui.com/easing/).

.toLocaleString('de') adalah kode untuk merubah angka mengikuti standar Jerman (Deutsch), dalam hal ini yang client butuhkan adalah pemisah angka ribuan dengan titik. Untuk standar negara lain bisa jadi pemisah ribuannya adalah koma.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Artikel Terkait Lainnya
Menonaktifkan Notifikasi Auto Update Plugin
Menambahkan class active pada navigasi aktif dengan jQuery
Potongan kode untuk menambahkan class active pada menu navigasi yang aktif.
Baca selengkapnya....
Membatasi jumlah kata pada kutipan (excerpt) artikel
Kode untuk membatasi jumlah kata pada kutipan (excerpt) artikel
Baca selengkapnya....
Fokus Otomatis di Kotak Pencarian
Potongan kode ini untuk membuat fungsi fokus otomatis di kotak pencarian.
Baca selengkapnya....
HTML Redirect domain
Kode HTML untuk mengalihkan pengunjung yang membuka suatu alamat domain tertentu ke alamat domain lainnya secara otomatis.
Baca selengkapnya....
Kembali ke atas
logo digitalizer
© 2011 - 2021 Digitalizer My ID - Allright Reserved
cross