当我进入该部分时加载动画

Question

我正在我的站点中使用技能进度。它是一个圆形的进度条。它在加载时有一个小动画，效果就像填充边框一样。但是动画运行会在页面加载时立即出现。如果我只滚动到该部分，我想做一个方法，然后动画将运行。

我正在使用 circliful 进度条插件。

Answer 1

如果元素在视口中，您需要初始化动画。在 window 滚动条上检查 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;
    }
}

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

当我进入该部分时加载动画

Load animation when I enter into the section

jquery

animation

lazy-loading

progress-bar