Animation Counter Javascript

Javascript code to display running count numbers
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Animation Counter Javascript
Table Of Content:
Related Article
Updated: 22 March 2022

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

<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.

Related Article

Adding Meta Author
Adding Meta Author in WordPress
class active in navigation
Adding active class to active navigation with jQuery
Code snippet to add active class to active navigation menu.
Navigation Menu
Code (Function) to bring up the menu list in WordPress
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
cross