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 HostingPasangkan kode jquery di dalam tag <head> ... </head>, jika sudah maka kamu akan siap untuk ngoding membuat animasi counter angka.
Isi Artikel
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.
