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 Space 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>
            
          

JavaScript behavior

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="".