QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Number Counter Animation using Javascript

Number Counter Animation using Javascript

number-counter-animation

Number counter animation is used throughout the web to display numbers in a more interesting and eye-catching way. For example: Websites use number counter animations to display total number of shares and views of an article.

In this tutorial I will show you the easiest way to create such animation using JavaScript.

countUp.js Library

We will use countUp.js JavaScript library to create a number counter animation.

Here is a basic HTML template which loads the countUp.js library.

<!doctype html>
<html>
    <head>
        <title>Counter Animation using JavaScript</title>
        <script type="text/javascript" src="https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.min.js"></script>
    </head>
    <body>
    </body>
</html>

Here we are loading the library from Rawgit CDN.

Example

Here is a complete example showing how to use this library

View Demo

<!doctype html>
<html>
    <head>
        <title>Counter Animation using JavaScript</title>
        <script type="text/javascript" src="https://cdn.rawgit.com/inorganik/countUp.js/master/countUp.min.js"></script>
    </head>
    <body>
        <h1><span id="number">249</span> shares</h1>

        <script type="text/javascript">
            var numAnim = new countUp(document.getElementById("number"), 0, 249);
            numAnim.start();
        </script>
    </body>
</html>

We are creating a new instance of countUp class by passing the element to counter and its starting number and ending number. To start the animation we need to call the start() function of countUp object.

Mar 24, 2015Narayan Prusty
WordPress Custom PHP, JS and CSS PluginJavaScript Scroll by Dragging
Comments: 2
  1. a
    4 years ago

    doesn’t work. just shows “249”

    ReplyCancel
    • b
      3 years ago

      still doesn’t work.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago 2 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • countUp.js Library
  • Example
Related Articles
  • Displaying And Highlighting Source code in HTML Page
  • Web Animation API Tutorial
  • Change Navigation Style On Scroll
  • Creating Windows Metro Style Layout for Websites
  • wikiHow Style Popup
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license