<!-- *** Matrix Widget animated counter *** -->
<div class="is-matrix bg-primary is-flex is-flex-block cc-clearover center-align">
    <div class="one-third color-white col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 counter center-align" style="font-size:50px;">
                32
            </h1>

            <p class="hs-center">
                Official Jimdo Experts
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-2 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 counter center-align" style="font-size:50px;">
                52
            </h1>

            <p class="hs-center">
                Freelancers and Web Agencies
            </p>
        </div>
    </div>

    <div class="one-third color-white opacity-4 col-flex">
        <div class="gutter-20">
            <h1 class="weight-700 counter center-align" style="font-size:50px;">
                18
            </h1>

            <p class="hs-center">
                Countries around the world
            </p>
        </div>
    </div>
</div>
<div class="c">
</div>


<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// animated counter
   // inViewport jQuery plugin
// https://stackoverflow.com/a/26831113/383904
$(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el){
      function visPx(){
        var H = $(this).height(),
            r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
        return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
      } visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));


jQuery(function($) { // DOM ready and $ in scope

  $(".counter").inViewport(function(px) { // Make use of the `px` argument!!!
    // if element entered V.port ( px>0 ) and
    // if prop initNumAnim flag is not yet set
    //  = Animate numbers
    if(px>0 && !this.initNumAnim) { 
      this.initNumAnim = true; // Set flag to true to prevent re-running the same animation
      $(this).prop('Counter',0).animate({
        Counter: $(this).text()
      }, {
        duration: 1000,
        step: function (now) {
          $(this).text(Math.ceil(now));
        }
      });         
    }
  });

});

});
})(jQuery); 
//]]>
</script>

<!-- *** Matrix Widget animated counter *** -->
<div class="is-matrix bg-grey add-20" style="border-radius:15px;">
    <center>
        <h3 class="weight-700 counter center-align" style="font-size:50px;">
            32
        </h3>

        <p class="hs-center">
            Official Jimdo Experts
        </p>
    </center>
</div>

<!-- *** Matrix Widget animated counter *** -->
<div class="is-matrix bg-dark color-white add-20" style="background:#1a42be;border-radius:5px;">
    <center>
        <div class="fa fa-rocket fa-2x" style="color:#436eef;">
        </div>

        <h3 class="weight-700 counter center-align" style="font-size:80px;">
            32
        </h3>

        <p class="hs-center">
            Official Jimdo Experts
        </p>
    </center>
</div>