This code enables you to display exactly what you see in the following image:
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:
No worries. Still very useful!
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.
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.