滚动时触发圆环图动画

Question

I've created some Donut charts with a simple fill animation but I'm having trouble triggering the animation on scroll. Would it be a good idea to add in animate.css and wow.js or is there an easier way to trigger the animation inside of the function? Thanks in advance for the help if you are able to help with this issue.

<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

try this, just check if the user scrolls then include inside if() your event function.

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

but remember that this may slow down the performance of your site. You may refer to this site for improvement, https://johnresig.com/blog/learning-from-twitter/ .