1

我有一个使用 CSS3 制作动画的条形图,动画当前在页面加载时激活。

由于页面加载时条形图不在视图中,因此您必须向下滚动才能看到它,当您到达它时,动画已经加载。所以我想做的是,当有人使用 js 滚动到 CSS3 动画时激活它。

这是我正在尝试做的一个示例:

jsfiddle.net

我想我在 .js 和 .css 中遗漏了什么或做错了什么。

    // Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.skiller #skill');

    // If the animation has already been started
    if ($elem.hasClass('html5')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('html5');
    }
}

提前谢谢你们!

4

1 回答 1

1

我就是这样做的:

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                if(scrollTop + viewportHeight >= top ){
                    $(this).addClass('html5');
                }
            });
        }
$(isElementInViewport);
$(window).scroll(isElementInViewport);
于 2013-08-21T09:19:01.573 回答