Counters

Animate a number from zero (counting up towards it).

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.counter.js plugi.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                
                  <script src="../../assets/vendor/appear.js"></script>
                
              

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

                
                  <script src="../../assets/js/components/hs.counter.js"></script>
                
              

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                
                  <script>
                    $(document).on('ready', function () {
                      // initialization of counters
                      var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                    });
                  </script>
                
              

Basic example

                      
                        <div class="row text-center">
                          <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                            <div class="js-counter h3">52147</div>
                            <h4 class="h6">Code Lines</h4>
                          </div>

                          <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                            <div class="js-counter h3">24583</div>
                            <h4 class="h6">Projects</h4>
                          </div>

                          <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                            <div class="js-counter h3">7348</div>
                            <h4 class="h6">Working Hours</h4>
                          </div>

                          <div class="col-lg-3 col-sm-6 mb-5 mb-lg-0">
                            <div class="js-counter h3">87904</div>
                            <h4 class="h6">Job Offers</h4>
                          </div>
                        </div>
                      
                    

Objects

                
                  bounds: -100 - integer
                  debounce: 10 - integer
                  time: 6000 - integer
                  fps: 60 - integer
                  commaSeparated: false - boolean
                
              

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-comma-separated="".