将饼图动画延迟到视口中

Delay pie chart animation until in viewport

本文关键字：迟到 视口 延迟 动画      更新时间：2023-09-26

我正在使用LugoLabs的这个名为"Circles"的jquery插件，以便在我正在构建的网站上制作一些饼图动画。（https://github.com/lugolabs/circles）

它

工作得很好，但饼图动画在页面加载时开始，我想延迟它，直到观众看到它。

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

----设置示例---

.HTML：

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

脚本：

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
});

如前所述评论： 圆圈 github 有一个示例，用于在查看圆圈时启动圆圈动画：https://github.com/lugolabs/circles/blob/master/spec/viewport.html。
我添加了一个包含此示例的小提琴，并且由于存在如何调整 OP 中的圆圈以使用此示例的问题，我在另一个小提琴中对其进行了调整。唯一的调整是更改函数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
  });
}

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

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

而不是加载插件...

相关文章：