Hello everyone, during my web development journey, I often encounter client requests to display data with an increasing number effect, which makes the website more dynamic and engaging. Today, I will share with you a very simple way to create an incrementing number effect using HTML and JavaScript!
This tutorial uses the Flatsome theme, so if you are using the Flatsome theme, you can follow it exactly. If you’re using a different theme, you might need to tweak the code or the steps to make it work for your setup.
Step 1: Create the number with HTML
Using the UX Builder in the Flatsome theme, edit the page and insert a custom HTML block by following the instructions as shown in the image below:
Create your desired HTML code, consisting of two separate parts: the running number part and the explanation part, as shown in the image. The running number part will have the class "item-number" and the attribute data-count="desired final number". Just follow this format and change the number as needed! (the part highlighted in green).
<p style="text-align: center;">
<strong class="item-number" id="number_1" data-count="7">7</strong><br />
Instructional article from ohhmua.com, thank you for watching
</p>
Step 2: Copy the JavaScript code
Go to the Advanced settings in Flatsome – Global Setting – Footer Script, and copy and paste the following code into that section.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><br />
<script>$('.item-number').each(function () {$(this).prop('item-number',0).animate({Counter: $(this).text()}, {duration: 7000,easing: 'swing',step: function (now) {$(this).text(Math.ceil(now));}});
});</script>
Please note, if you want the number to run slower, you can adjust the value in the duration:7000 section!
