Radialbalken animieren in Ansichtsfenster

Question

Ich habe Radialbalken nur auf einer Seite. Auch ich habe eine Funktion verwendet, um das Element in der Ansicht nicht zu überprüfen. Ich verwende diese Funktion für andere Elemente auf der Seite. Mein Radial mit Hintergrundbild Farbverlauf gemacht, sicher besser Svg hier verwenden, habe ich nie Svg als Radialbalken verwenden. Ich muss den Fortschrittsbalken mit Prozentsätzen animieren, wenn sie in das Ansichtsfenster kommen. Ich habe ein Beispiel mit Svg Radial-Taste, besser als Callback-Funktion verwenden, wenn im neuen Port innerhalb meiner Viewport-Checker-Funktion? radial svg codepencodepen

<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

I kombiniert zwei Skript und jetzt alle daran arbeiten codepen solution richtig überprüfen. Ich brauche den Ratschlag, wie ich meinen Code optimieren und Best Practice anwenden kann.

(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);