Waypoint가있는 브라우저에 Progressbar.js가 표시되면 애니메이션을 적용하는 방법은 무엇입니까?

Question

Progressbar.js을 사용하여 애니메이션 진행률 표시 줄을 만듭니다. 그러나 문제는 내가 그것을 내려 놓을 때, 그것이보기에 오기 전에이다. 표시 할 때만 애니메이션을 실행하려면 Waypoints을 사용하고 있지만 올바르게 표시하지는 않습니다.

제발 알아낼 수 있도록 도와주세요.

감사합니다.

var bar = new ProgressBar.Line(container, { 
 
     strokeWidth: 5, 
 
     easing: 'easeInOut', 
 
     duration: 1400, 
 
     color: '#FFEA82', 
 
     trailColor: '#eee', 
 
     trailWidth: 2, 
 
    }); 
 

 
    bar.animate(1.0); // Number from 0.0 to 1.0

#container{ 
 
    margin-top:500px; 
 
    width: 300px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
 

 

 
scroll down 
 
<div id="container"></div>

Answer 1

간단한 웨이 포인트는 할 것입니다. 그러나 기본적으로 웨이 포인트는 요소가 페이지 상단에 도달 할 때만 트리거됩니다. 페이지를 스크롤하여 페이지 하단에 나타나게하는 것만으로는 충분하지 않습니다. 모든 것이 끝나거나 offset 매개 변수를 사용하면 도움이됩니다.

var bar = new ProgressBar.Line(container, { 
 
     strokeWidth: 5, 
 
     easing: 'easeInOut', 
 
     duration: 1400, 
 
     color: '#FFEA82', 
 
     trailColor: '#eee', 
 
     trailWidth: 2, 
 
    }); 
 

 
    $("#container").waypoint(function(){ 
 
     bar.animate(1.0); // Number from 0.0 to 1.0 
 
    }, {offset: "50%"}) 
 

#container{ 
 
    margin-top:500px; 
 
    margin-bottom:500px; 
 
    width: 300px; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script> 
 

 

 
scroll down 
 
<div id="container"></div>