Question

我正在寻找一种仅在滚动时启动圆环图动画的方法，因为在当前状态下，每当页面加载时图表动画就会启动，而且我无法看到动画发生的情况。部分低于其他部分。

图表是用https://github.com/rendro/easy-pie-chart

制作的

代码：https://codepen.io/Kestvir/pen/GEwMGP

   $(document).ready(function() {

  $('.chart-blue').easyPieChart({
    barColor: '#30bae7',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0,
    onStep: function(from, to, percent) {
      $(this.el).find('span').text(Math.round(percent));
    }
  });

  $('.chart-pink').easyPieChart({
    barColor: '#d74680',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0,
    onStep: function(from, to, percent) {
      $(this.el).find('span').text(Math.round(percent));
    }

  });

  $('.chart-green').easyPieChart({
    barColor: '#17c2a4',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0,
    onStep: function(from, to, percent) {
      $(this.el).find('span').text(Math.round(percent));
    }

  });


  $('.chart-orange').easyPieChart({
    barColor: '#eb7d4b',
    scaleColor: false,
    lineWidth: 10,
    lineCap: 'circle',
    size: 150,
    scaleLength: 0,
    onStep: function(from, to, percent) {
      $(this.el).find('span').text(Math.round(percent));
    }
  });

});

Answer 1

查看codepen

基本上我写了一个If语句

 $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {

滚动特定数量的像素（在这种情况下为500）时会触发

，当发生这种情况时，您的图表将开始加载并获得您希望的效果。希望如果不发表评论：）

滚动图表动画开始

1 个答案: