ページの読み込み時にアニメーション化するプログレスバーがありますが、ページの中央に表示されるため、ユーザーが下にスクロールしたときにアニメーション化する必要があります。現在、ページが読み込まれると、ユーザーにはアニメーションが表示されません。
したがって、基本的に、ユーザーが特定のポイントまでスクロールダウンするまでアニメーションを一時停止する必要があります。バーが表示されると、アニメーションが開始されます。
これが私がこれまでに持っているJavascriptです:
$(function() {
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
});
より詳細なjsfiddleは次のとおりです。http://jsfiddle.net/YAZJb/