ウェイポイントでブラウザに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>