How to Create Animated Number Counters in Oxygen

Paste below HTML code at Code Block

<!-- In Oxygen, select the text box directly and add a class called counter -->
<!-- Next, add a code block just under the body of the page where you're adding the counter -->
<!-- Next, in the HTML section of the code, copy lines 10-30 -->
<!-- Next, save and see if it is working on the front end.  If not, inspect. -->
<!-- Next, change line 14 to say only <script src="jquery.counterup.min.js"></script> -->
<!-- Finally, download the jquery.counterup.min.js file from https://github.com/bfintal/Counter-Up
     and upload the jquery.counterup.min.js file to your site host files where your site is installed -->


<!-- This is the jQuery version we'll be using for compatibility reasons -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Waypoints is required by this jQuery plugin to work, so we refer to it here -->
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>

<!-- This is a temporary hotlink to test it out before uploading the js file to WordPress host-->
<script src="https://bfintal.github.io/Counter-Up/jquery.counterup.min.js"></script>

<!-- This is the script itself that will affect any numbers tagged with CSS class "counter" -->
<script>
    jQuery(document).ready(function($) {
        $('.counter').counterUp({
            delay: 10,
            time: 1000        
            });
    }); 
</script>

<!-- Just put these here to test them out below.  You don't need to copy this -->
<span class="counter">123</span></br>
<span class="counter">1234</span></br>
<span class="counter">12345</span>

Source: https://codepen.io

Copyright © 2024 Siam Naulak.
magnifiercrossmenu