Question

我正在使用LugoLabs的这个jquery插件，名为＆＃34; Circles＆＃34;为了在我正在建立的网站上制作一些饼图动画。（https://github.com/lugolabs/circles）

它完美无缺，但饼图动画从页面加载开始，我想延迟它直到观众看到它。

是否可以使用viewportchecker.js（https://github.com/dirkgroenen/jQuery-viewport-checker）之类的东西来仅在有人查看动画时启动动画？我之前在其他项目上使用过这个功能，但是我很难将它与现有的javascript集成。

----示例设置---

HTML：

<div class="circle" id="circles-1"></div>

SCRIPT：

var myCircle = Circles.create({
id:           'circles-1',
radius:       60,
value:        43,
maxValue:     100,
width:        10,
text:         function(value){return value + '%';},
colors:       ['#D3B6C6', '#4B253A'],
duration:       400,
wrpClass:     'circles-wrp',
textClass:      'circles-text'
styleWrapper: true,
styleText:    true
});

Answer 1

你不能像下面这样计算滚动高度：

$(document).scroll(function(){
    if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
    {   
        $(function() {
         ///your pies, 810px is your height
        });

    });
    }
});

而不是加载插件......

Answer 2

如前所述为评论：circles github有一个示例，可在圈子在视野中时启动圈子动画：https://github.com/lugolabs/circles/blob/master/spec/viewport.html。
我添加了一个包含此示例的Fiddle，因为有一个问题如何从OP调整圆圈以使用此示例我已经在另一个Fiddle中对此进行了调整。唯一的调整是更改函数createCircles，如下所示：

function createCircles() {
  var myCircle = Circles.create({
     id:           'circles-1',
     radius:       60,
     value:        43,
     maxValue:     100,
     width:        10,
     text:         function(value){return value + '%';},
     colors:       ['#D3B6C6', '#4B253A'],
     duration:     400,
     wrpClass:     'circles-wrp',
     textClass:    'circles-text',
     styleWrapper: true,
     styleText:    true
  });
}

延迟饼图动画直到在视口中

2 个答案: