뷰포트에서 지연 원형 차트 애니메이션

Question

저는 건물에있는 파이 차트를 애니메이션화하기 위해 "Circles"라는 LugoLabs에서이 jquery 플러그인을 사용하고 있습니다. (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

앞서 언급 한 바와 같이 circles github에는 원이 표시 될 때 원 애니메이션을 시작하는 예가 표시됩니다 (https://github.com/lugolabs/circles/blob/master/spec/viewport.html).
이 예제가 들어있는 Fiddle을 추가했습니다.이 예제를 사용하기 위해 OP에서 원을 조정하는 방법에 대한 질문이 있었기 때문에 이것을 다른 Fiddle에서 조정했습니다. 경우

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

Answer 2

방금 ​​계산할 수 없습니다 스크롤 높이와 같은 :

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

    }); 
    } 
}); 

플러그인을로드하는 대신 ...