放射状のバーをビューポートにアニメーションします

Question

私はラジアルバーを1ページにしか持っていません。また、私はいくつかの関数を使用して、ビュー内の要素をチェックしませんでした。私はこの機能をページ上の他の要素に使用します。 私のラジアルは背景画像のグラデーションで作られていますが、確かにここではsvgを使用してください。私はラジアルバーとしてsvgを使用していません。私は、ビューポートに進捗バーをパーセンテージでアニメーション表示する必要があります。私はラジオボタンsvgの例を持っている、私のビューポートチェッカーの機能の中で新しいポートにコールバック関数として使用する方がいいですか？ radial svg codepen codepen

<div class="container"> 
    <div class="item progress-42"> 
    <div class="radial-inner-bg"><span>42%</span></div> 
    </div> 
    <div class="item progress-33"> 
    <div class="radial-inner-bg"><span>33%</span></div> 
    </div> 
    <div class="item progress-20"> 
    <div class="radial-inner-bg"><span>20%</span></div> 
    </div> 
    <div class="item progress-95"> 
    <div class="radial-inner-bg"><span>95%</span></div> 
    </div> 
    <div class="item progress-85"> 
    <div class="radial-inner-bg"><span>85%</span></div> 
    </div> 
    <div class="item progress-70"> 
    <div class="radial-inner-bg"><span>70%</span></div> 
    </div> 
</div> 



function isElementInViewport(elem) { 
    var $elem = $(elem); 
    // Get the scroll position of the page. 
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
    var viewportTop = $(scrollElem).scrollTop(); 
    var viewportBottom = viewportTop + $(window).height(); 
    // Get the position of the element on the page. 
    var elemTop = Math.round($elem.offset().top); 
    var elemBottom = elemTop + $elem.height(); 
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 
// Check if it's time to start the animation. 
function checkAnimation() { 
    var $elem = $('.vc-key-figures-item--circle'); 
    var $newsArrowRight = $('.news-link .icon-slim-right'); 
    // If the animation has already been started 
    if ($elem.hasClass('grow-js')) return; 
    if (isElementInViewport($elem)) { 
    // Start the animation 
    $elem.addClass('grow-js'); 
    } 
    $.each($newsArrowRight, function() { 
    var element = $(this); 
    if (element.hasClass('fade-in-right-js')) return; 
    if (isElementInViewport(element)) { 
     element.addClass('fade-in-right-js'); 
    } 
    }); 
} 
// Capture scroll events 
$(window).scroll(function() { 
    checkAnimation(); 
}); 

Answer 1

私は2つのスクリプトを組み合わせて、現在すべて正しく動作codepen solutionをそれをチェックアウト。自分のコードを最適化する方法をアドバイスし、ベストプラクティスを使用する必要がありますか？

(function($) { 

    var forEach = function(array, callback, scope) { 
     for (var i = 0; i < array.length; i++) { 
      callback.call(scope, i, array[i]); 
     } 
    }; 

    var radialBarAnimate = function() { 
     var max = -219.99078369140625; 
     forEach(document.querySelectorAll('.progress'), function(index, value) { 
      percent = value.getAttribute('data-progress'); 
      progressValue = value.getAttribute('data-progress-value'); 
      fill = value.querySelector('.fill'); 
      if (fill.hasAttribute("style")) return; 
      if (isElementInViewport(fill)) { 
       fill.setAttribute('style', 'stroke-dashoffset: ' + ((100 - percent)/100) * max); 
       value.querySelector('.value').innerHTML = progressValue; 
      } 
     }); 
    } 

    function isElementInViewport(elem) { 
     var $elem = $(elem); 
     // Get the scroll position of the page. 
     var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
     var viewportTop = $(scrollElem).scrollTop(); 
     var viewportBottom = viewportTop + $(window).height(); 
     // Get the position of the element on the page. 
     var elemTop = Math.round($elem.offset().top); 
     var elemBottom = elemTop + $elem.height(); 
     return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
    } 
    // Check if it's time to start the animation. 
    function checkAnimation() { 
     radialBarAnimate(); 
    } 
    // Capture scroll events 
    $(window).scroll(function() { 
     checkAnimation(); 
    }); 

})(jQuery);