画面に表示されたらアニメーションを実行するjquery
jqueryはプラグインが色々あって便利だけど、ヘッダを見たときやたらプラグインを読み込んでいるのは格好いいとは言えない。
だから自分で書けるものは自分で書くのがよろし。
さて、プログレスバーを動かすのに、ページの下の方にあるやつは、タイミングをコントロールしないと動きが見えない（スクロールするまでにアニメーションが終わっちゃう）。
なので、それをコントロールするためのスクリプトがこちら。
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ var triggerNode = $("div.progress-bar"); $(window).scroll(function(){ var triggerNodePosition = $(triggerNode).offset().top - $(window).height(); if ($(window).scrollTop() > triggerNodePosition) { $.each($('div.progress-bar'),function(){ $(this).css('width', $(this).attr('aria-valuetransitiongoal')+'%'); }); } }); }); |
動いてるよ～。