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

Question

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

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

Answer 1

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

Образец 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;
    }
}

Как определить, виден ли элемент DOM в текущем окне просмотра?