如何在滚动后显示饼图动画

Question

我用简单的饼图制作了一个饼图。对于滚动时显示，我使用Wow.js。但是，当scroll.Its显示我是否在该部分时，我想显示饼图增加到其定义的百分比。但是我想在scroll.How之后展示这个动画，我可以这样做吗？请帮帮我。

下面是我使用的简单饼图的代码

$('.chart').easyPieChart({
    'barColor':'#AD984E',
    'scaleColor':'#141414',
    'trackColor':'#EEEEEE',
    'size':'200',
    'lineWidth':'5',
    animate: 5000
});

和魔兽世界的js

 wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       100,          // default
      mobile:       true,       // default
      live:         true        // default
    }
  )
  wow.init();

这是我作品的链接：http://kapilpaul.uphero.com/autoputzer/

提亚

Answer 1

你可以试试这段代码：

    $(window).scroll( function(){

    /* Check the location of each desired element */
    $('.chart').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.chart').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: 5000,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});

Answer 2

只需在包含easyPieChart.js之后将此代码放入主js文件中

$(document).ready(function(){
    $(document).scroll(function(){
    var postionTop = $(document).scrollTop();
    console.log(postionTop);
    if((postionTop >=600)){
        $('.chart').easyPieChart({
            animate: 2000,
       });
    };
  });
});

Answer 3

HTML代码

您可以使用data属性来处理每个图表的动画速度

<div class="chart" data-speed="5000"></div>

JavaScript代码

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.chart').each( function(i){
var el = $(this),
speed = el.data('speed');

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

        $('.chart').easyPieChart({
          size: 140,
          lineWidth: 6,
          lineCap: "square",
          barColor: "#22a7f0",
          trackColor: "#ffffff",
          scaleColor: !1,
          easing: 'easeOutBounce',
          animate: speed ,
          onStep: function(from, to, percent) {
          $(this.el).find('.percent').text(Math.round(percent));
          }
        });

        }

    }); 

});