QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • 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
    5 years ago

    doesn’t work. just shows “249”

    ReplyCancel
    • b
      5 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`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 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
My Books

2014 - 2015 © QNimate
All tutorials MIT license