Показывать одинокий счетчик, когда он прибудет в секцию js

Я делаю счетчик чисел с jQuery, до там все добро. Проблема, - в котором только я хочу, чтобы он работал, когда ты прибудешь в секцию, потому что, если не, когда ты загружаешься и прибываешь уже была завершена функция. Я это попробовал с delay но единственное, чего я достиг, состоит в том, чтобы давать ему секунды края.

Это код, который у меня есть (в Codepen):

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {
      duration: 8000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }
    });
});
body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

p {
  text-align: center;
  margin-bottom: 150%;
}


baja


0
0
0

3
задан 30.03.2019, 06:40
1 ответ

Вещь, что podrГ-схвати делать, чтобы не меняться много ты cГіdigo, состоит в том, чтобы помещать часть, которая инициализирует счетчики внутри одной funciГіn и sГіlo называть эту funciГіn, когда счетчики estГ©n видимые.

Для этого шаги serГ-an:

  • Он Завертывает ты cГіdigo в одну funciГіn (меня назвало ее empezarContadores)
  • AГ±ade драйвер события scroll в окно, которое:
    1. подтвердил, преодолевает ли scroll верхнюю часть элемента, который содержит счетчики (.text). Для этого ты можешь использовать scrollTop(), чтобы знать cuГЎnto двинулись scrolls и offset() (с нею opciГіn top), чтобы знать ее posiciГіn вертикально об элементе.
    2. , Если элемент estГЎ видимый (внутри видимого ГЎrea окна): назови в нее funciГіn, который ты создал наверху.

, Чтобы это завершать, ты можешь снимать драйвер события scroll используя off (для того, чтобы он был mГЎs работоспособно, потому что не estarГЎn делая проверки каждый раз, когда он был сделан scroll).

AquГ - ты можешь видеть изменения наверху функционируя:

$(window).on("scroll", function(){
  if ($(window).scrollTop() > $(".texto").offset().top) {
    empezarContadores();
    $(window).off("scroll");
  }
})

function empezarContadores() {
  $('.counter').each(function() {
    var $this = $(this),
      countTo = $this.attr('data-count');
    $({
      countNum: $this.text()
    }).animate({
        countNum: countTo
      },

      {
        duration: 8000,
        easing: 'linear',
        step: function() {
          $this.text(Math.floor(this.countNum));
        },
        complete: function() {
          $this.text(this.countNum);
          //alert('finished');
        }
      });
  });
}
body {
  background-color: #F46A6A;
  color: #fff;
  max-width: 800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin: 1.5%;
  font-size: 50px;
  background-color: #FF6F6F;
  width: 200px;
  border-radius: 50%;
  height: 200px;
  vertical-align: middle;
}

p {
  text-align: center;
  margin-bottom: 150%;
}

.as-console-wrapper {
max-height: 100px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="texto">
  <p>baja</p><br>
  <div class="counter" data-count="150">0</div>
  <div class="counter" data-count="85">0</div>
  <div class="counter" data-count="2200">0</div>
</div>
1
ответ дан 02.12.2019, 07:48