Запустить анимацию кольцевой диаграммы при прокрутке

Question

Я создал несколько кольцевых диаграмм с простой анимацией заливки, но у меня возникают проблемы при запуске анимации при прокрутке. Будет ли хорошей идеей добавить анимацию. css и вау. js или есть более простой способ запуска анимации внутри функции? Заранее благодарим за помощь, если вы можете помочь с этой проблемой.

<div class="donut-chart orange" data-percent="72">
  <p><span class="counter" data-count="72">0</span>%</p>
  <div class="doughnut"></div>
</div>

$(function() {
  $('.donut-chart').each(function(index) {
    $(this).append('<svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" id="donutChartSVG' + index + '"><path d="M100,100"/></svg>');
    var p = new Donut_chart({
      element: $('#donutChartSVG' + index),
      percent: $(this).attr('data-percent')
    });
    p.animate();
  });
});

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

  $({
    countNum: $this.text()
  }).animate({
    countNum: countTo
  }, {
    duration: 2000,
    easing: 'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
    }
  });
});

.donut-chart svg {
  pointer-events: none;
  height: 100%;
  stroke: #19a8ff;
}

.donut-chart svg path {
  fill: none;
  stroke-width: 35px;
  stroke: #19a8ff;
}

.donut-chart {
  width: 200px;
  height: 200px;
  display: inline-block;
  left: 20%;
  margin-bottom: 30px;
}

.donut-chart p {
  margin: 0;
  position: absolute;
  left: 1%;
  top: 25%;
  font-family: 'Open Sans', sans-serif;
  font-weight: bolder;
  color: #222;
  width: 100%;
  text-align: center;
  font-size: 2em;
}

.doughnut {
  border: 35px solid #EAECEF;
  border-radius: 100px;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0px;
  z-index: -1;
}

Answer 1

попробуйте это, просто проверьте, прокручивает ли пользователь, а затем включите в if() функцию вашего события.

$(window).scroll(function() {
    if ($('.donut-chart').is(':visible')) {
        // do your stuff here, include function with p.animate();
    }
});

, но помните, что это может замедлить работу вашего сайта. Вы можете ссылаться на этот сайт для улучшения, https://johnresig.com/blog/learning-from-twitter/.