Javascript Animasi Angka

Kode Javascript untuk menampilkan angka hitung yang berjalan
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
KomentarArtikel Terkait
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.

One comment on “Javascript Animasi Angka”

Artikel Terkait

oxygen builder meta query product on sale
Oxygen Builder Repeater - Woocommerce Product On Sale
Catatan: Lihat gambar diatas (Oxygen Builder Advanced Query), dan jangan lupa menambahkan query: post_type : product posts_per_page : -1 // […]
Kode One Page Scroll
Demo kode dibawah ini bisa anda lihat pada halaman Demo Onepage Scroll. Kode HTML Kode Javascript Kode CSS Sumber: https://github.com/peachananr/onepage-scroll
Warna WooCommerce pada Oxygen Builder
Keterangan: Ganti color(45) dengan hex warna atau variabel warna pada Oxygen Builder.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross