Question

您好我正在尝试为我的网站部分制作动画，我正在尝试使用以下代码

function onScrollInit(items, trigger) {
    items.each(function () {
        var osElement = $(this),
            osAnimationClass = osElement.attr('data-os-animation'),
            osAnimationDelay = osElement.attr('data-os-animation-delay');

        osElement.css({
            '-webkit-animation-delay': osAnimationDelay,
            '-moz-animation-delay': osAnimationDelay,
            'animation-delay': osAnimationDelay
        });

        var osTrigger = (trigger) ? trigger : osElement;

        osTrigger.waypoint(function () {
            osElement.addClass('animated').addClass(osAnimationClass);
        }, {
            triggerOnce: true,
            offset: '90%'
        });
    });
}

function revealOnScroll() {
    var scrolled = $window.scrollTop();
    $(".revealOnScroll:not(.animated)").each(function () {
        var $this = $(this),
            offsetTop = $this.offset().top;

        if (scrolled + win_height_padded > offsetTop) {
            if ($this.data('timeout')) {
                window.setTimeout(function () {
                    $this.addClass('animated ' + $this.data('os-animation'));
                }, parseInt($this.data('timeout'), 10));
            } else {
                $this.addClass('animated ' + $this.data('os-animation'));
            }
        }
    });
}

取自http://www.67nj.org/triggering-css-animations-on-scroll/和http://www.oxygenna.com/tutorials/scroll-animations-using-waypoints-js-animate-css

这可以按预期工作，所以当网站访问者滚动到它动画的网站的一部分，但它阻止我的导航和推文提要工作我已经厌倦了使用它作为revealOnScroll的替代

  <script>
$(function () {
    var $window = $(window),
        win_height_padded = $window.height() * 1.1,
        isTouch = Modernizr.touch;
    if (isTouch) {
        $('.revealOnScroll').addClass('animated');
    }
    $window.on('scroll', revealOnScroll);

    function revealOnScroll() {
        var scrolled = $window.scrollTop(),
            win_height_padded = $window.height() * 1.1;
        $('.revealOnScroll:not(.animated)').each(function () {
            var $this = $(this),
                offsetTop = $this.offset().top;
            if (scrolled + win_height_padded > offsetTop) {
                if ($this.data('timeout')) {
                    window.setTimeout(function () {
                        $this.addClass('animated ' + $this.data('animation'));
                    }, parseInt($this.data('timeout'), 10));
                } else {
                    $this.addClass('animated ' + $this.data('animation'));
                }
            }
        });
        $('.revealOnScroll.animated').each(function (index) {
            var $this = $(this),
                offsetTop = $this.offset().top;
            if (scrolled + win_height_padded < offsetTop) {
                $(this).removeClass('animated fadeInUp flipInX lightSpeedIn');
            }
        });
    }
    revealOnScroll();
});
//@ sourceURL=pen.js
</script>

这个功能似乎阻止了它的工作

$(function () {
    var $window = $(window),
        win_height_padded = $window.height() * 1.1,
        isTouch = Modernizr.touch;
    if (isTouch) {
        $('.revealOnScroll').addClass('animated');
    }

我知道我很接近但不确定如何解决这个问题

麦克

动画功能与我网站的其他部分冲突

0 个答案: