Animation Counter Javascript

Javascript code to display running count numbers
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
favico digitalizer

The following javascript code serves to display a running calculated number. I use this script when helping the https://oeko-reiner.de project that uses Oxygen Builder

Example results

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>

Information

counter: 4000 is the last number to go to, starting from the number we made, which is 2500.

.counter is a class that we add to the number as the target script marker.

duration: 15000 is the time it takes to finish the animation, which is 15000 ms or 15 seconds.

easing: swing is the animation model used (see: https://jqueryui.com/easing/ ).

.toLocaleString ('de') is a code to change numbers following the German standard (Deutsch), in this case what the client needs is separating thousands of numbers with dots. For the standard of other countries, the separator of the thousands is comma.

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Article

Woocommerce Total Item with Ajax
Woocommerce Total Item with Ajax Code Snippet
Read more...
Disable Auto Update Notification Emails for Plugins
Limiting the number of words in the excerpt of the article
Snippet code for limiting the number of words in the excerpt of the article
Read more...
HTML Code to Redirect Domain
HTML code to automatically redirect visitors who open a particular domain address to another domain address.
Read more...
Auto Focus in Search Form
This code snippet is to create an auto focus function in the search form when the search button is clicked.
Read more...
Add Code Snippet to a Specific Page Header
Code Snippet to add specific code to a specific page header.
Read more...
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
logo digitalizer - en
© 2011 - 2021 Digitalizer My ID
cross