Question

我正在尝试在滚动进出视口时创建一些动画效果。当用户滚动直到块进入视口时，动画激活（一个段落从底部进入（滑动效果）），当用户滚出它时，另一种动画激活（段落出现上侧（滑出效果）），如果用户决定向后滚动到该块，幻灯片将再次激活。一个例子是www.allbirds.com，我希望与第二个块具有相同的动画，以＆＃34开头的段落;创建最舒适的秘密＆＃34;。

这是我使用animated.css创建的Fiddle和来自另一个问题的一些代码，当你向下滚动时它会激活一次，但是当我滚动传递它时，它不会再次激活，我也想创建＆＃34; bounceOutUp＆＃34;当我通过街区时，我怎么能这样做？非常感谢任何帮助，提前谢谢。

// Returns true if the specified element has been scrolled into the viewport.
function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

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

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

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

如何根据滚动到视口并向外滚动来激活和停用动画？

0 个答案: