Загрузить анимацию, когда я вхожу в раздел

Question

Я использую прогресс навыков на своем сайте. Это круговой индикатор выполнения. У него небольшая анимация при загрузке, эффект подобен заполнению границы. но анимация запускается сразу же при загрузке страницы. Я хочу сделать способ, если я перейду к этому разделу только тогда, когда будет запущена анимация.

Я использую плагин circliful для индикатора выполнения.

Answer 1

Вы должны инициализировать анимацию, если элемент находится в окне просмотра. Проверьте функцию isElementInViewport на прокрутке окна.

Sample JS

function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 

} 

var isAnimated = false; 
window.onscroll = function(){ 
    if(isElementInViewport($('#myStat')) && !isAnimated){ 
     $('#myStat').circliful(); 
     isAnimated = true; 
    } 
} 

How to tell if a DOM element is visible in the current viewport?