我进入该部分时加载动画

Question

我在网站上使用技能进度。这是一个循环进度条。它加载时有一个小动画，效果就像填满边框一样。但是当页面加载时动画会立即运行。如果我滚动到该部分，我只想动画将运行。

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

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;
    }
}

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