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.
Loading...jQuery({ Counter: 4000 }).animate({
Counter: jQuery('.counter').text()
}, {
duration: 15000,
easing: 'swing',
step: function() {
jQuery('.counter').text(Math.ceil(this.Counter).toLocaleString('de'));
}
});<!-- contoh htmlnya animasi angka berjalan --> <div> <p class="counter">2500</p> </div>
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.
Pada saat mengerjakan https://confidia.de/steuerberatung maka ada kebutuhan animasi berjalan jika pada section yang memuat angka tersebut muncul pada viewport karena posisi angka berada agak kebawah halaman.
Untuk itu kami menggunakan waypoint.js dan CounterUp2.js agar dapat mengaktifkan animasi jika angka/section sudah tampak pada layar.
<!-- load script waypoint dan counterup2 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/counterup2/2.0.2/index.js"></script> <!-- kode html --> <span class="counter">9</span>
/** https://codepen.io/mnunes/pen/RXQqXz **/
jQuery( document ).ready( function() {
jQuery(function ($) {
"use strict";
var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"
var $counters = $(".counter");
/* Start counting, do this on DOM ready or with Waypoints. */
$counters.each(function (ignore, counter) {
var waypoint = new Waypoint( {
element: $(this),
handler: function() {
counterUp(counter, {
duration: 5000,
delay: 16
});
this.destroy();
},
offset: 'bottom-in-view',
} );
});
});
});
Terima kasih