• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

jQuery Number Animation – Counter To Count Up To A Target Number

This code enables you to display exactly what you see in the following image:

counter-jquery

It creates a fun counter or in this example, a row of 4 counters.

You simply set the target number, speed and other options to count to your target number each time the page reloads. Here’s the video demo:

You can change the target number and speed in the HTML for each counter.

HTML

data-to="300" 
data-speed="1500"

data-to= In the above example, “300” is the target number.

data-speed= “1500” is the speed at which it counts. Reduce this number to count faster and increase it to count slowly.

The numbers are set and the target number and speed do not change dynamically.

The code includes jQuery, CSS, HTML and PHP.

Also includes CSS for custom column classes and additional HTML if you want to use Bootstrap column classes for Genesis users.

Code Installation

jQuery – Paste the jQuery into a new file named counter.js in your child themes js folder.
CSS – Paste in your child themes style.css file.
HTML – Paste into a text widget in the Counter widget.
PHP – Paste at the end of your child themes functions file.

Here’s all the code:

Register for full access

Animation

Reader Interactions

Comments

  1. jordonrupp says

    January 27, 2016 at 9:52 am

    No worries. Still very useful!

    Log in to Reply
  2. jordonrupp says

    January 26, 2016 at 8:32 pm

    This is such a clean approach. Thank you. How would you allow this counter to continue infinitely? For example, to express a total count since the page has loaded.

    Log in to Reply
    • Brad Dalton says

      January 26, 2016 at 10:16 pm

      You can modify the data values however that’s all the flexibility this solution includes at the moment. The demo is a gif image and not a live example of what the code produces.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.