d2321
5/15/2020 - 4:16 PM

Counters

  $(".counters-wrap").each(function () {
    var a_flag = 0;
    var counter_wrap_id = "#" + $(this).attr("id");
    if (true) {
      $(window).scroll(function () {
        var oTop = $(counter_wrap_id).offset().top - window.innerHeight;
        if (a_flag == 0 && $(window).scrollTop() > oTop) {
          $("" + counter_wrap_id + " .counter-value").each(function () {
            var $this = $(this),
              countTo = $this.attr("data-count");
            $({
              countNum: $this.text(),
            }).animate(
              {
                countNum: countTo,
              },

              {
                duration: 2000,
                easing: "swing",
                step: function () {
                  $this.text(Math.floor(this.countNum));
                },
                complete: function () {
                  $this.text(Math.floor(this.countNum));
                  //alert('finished');
                },
              }
            );
          });
          a_flag = 1;
        }
      });
    }
  });
<?php
    function d_counters($arr = null) {
        if (!$arr) return '[d_counters] pass array';
        static $static_id = 0;

        $rows = '';
        if ( have_rows($arr['field'], $arr['id']) ) : while( have_rows($arr['field'], $arr['id']) ) : the_row();
        $rows .= '
            <div class="col-md-4 col-counters d-flex justify-content-center align-items-center">
                <div class="sub-wr d-flex">
                    <div class="ic-wr relative">
                        <img class="im mylazy relative z3" data-src="'.get_sub_field($arr['sf_icon']).'" alt="">
                    </div>                
                    <div class="data-wr">
                        <div class="heading-4"><span class="counter-value" data-count="'.get_sub_field($arr['sf_number']).'">0</span>'.get_sub_field($arr['sf_suffix']).'</div>
                        <div class="desc mb-0">'.get_sub_field($arr['sf_text']).'</div>
                    </div>
                </div>
            </div>
        ';
        endwhile; endif;         

        return '
            <div id="d_counters_'.$static_id++.'" class="counters-home-sec counters-wrap">
                <div class="container">                 
                    <div class="row">'.$rows.'</div>
                </div>
            </div>        
        ';
    }

/* Usage
$arr = array(
    'id' => d_get_global('option'),
    'field' => 'counters',
    'sf_number' => 'number',
    'sf_suffix' => 'suffix',
    'sf_text' => 'text',
    'sf_icon' => 'icon'
);
echo d_counters($arr);
*/

/* ACF JSON
[{"key":"group_5ebfef703a87f","title":"counters","fields":[{"key":"field_5ebfef784883a","label":"counters","name":"counters","type":"repeater","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"collapsed":"","min":0,"max":0,"layout":"table","button_label":"","sub_fields":[{"key":"field_5ebfef884883c","label":"number","name":"number","type":"number","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"default_value":1,"placeholder":"","prepend":"","append":"","min":1,"max":"","step":1},{"key":"field_5ebfef8d4883d","label":"suffix","name":"suffix","type":"text","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"default_value":"","placeholder":"","prepend":"","append":"","maxlength":""},{"key":"field_5ebfef934883e","label":"text","name":"text","type":"text","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"default_value":"","placeholder":"","prepend":"","append":"","maxlength":""},{"key":"field_5ebff2e82814c","label":"icon","name":"icon","type":"image","instructions":"","required":0,"conditional_logic":0,"wrapper":{"width":"","class":"","id":""},"return_format":"url","preview_size":"medium","library":"all","min_width":"","min_height":"","min_size":"","max_width":"","max_height":"","max_size":"","mime_types":""}]}],"location":[[{"param":"options_page","operator":"==","value":"acf-options"}]],"menu_order":0,"position":"normal","style":"default","label_placement":"top","instruction_placement":"label","hide_on_screen":"","active":true,"description":""}]
*/
.col-counters {
  margin-bottom: 30px;
  .sub-wr {
    display: flex;
    align-items: center;

    .ic-wr {
      width: 8.5rem;
      text-align: center;

      .im {
        width: 8rem;
      }
    }
    .data-wr {
      width: calc(100% - 8.5rem);
      padding-left: 4rem;
    }
  }
}