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 に答える