Question

我正在尝试使用本教程http://codepen.io/benske/full/yJoqz实现在滚动时激活的css动画。

我唯一修改的是jquery无冲突模式，

我的版本：

   <script>
 jQuery(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;

    // Showed...
    jQuery(".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'));
        }
      }
    });
    // Hidden...
   jQuery(".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();
   });
</script>

我设法让动画在滚动时激活但是每次向上滚动以移除动画时，在向下滚动时，动画有时会跳到最后几毫秒或根本不玩。

你可以看到我dev.silverfx.co.uk的尝试，可能需要一对上下滚动查看，但如果你将平滑性与教程进行比较，你很快就会明白我的意思。

Answer 1

为了在滚动上制作动画，我强烈建议使用scrollmagic。它的使用和设计非常简单，特别是为了这个目的而且比哇更有效率。

使用GSAP ScrollMagic（动画引擎，比jquery快得多）将允许您轻松创建更复杂的动画。

我确实在您提供的示例链接上尝试了解决方案，并且只有在非常快速地滚动时才能重新创建问题。当我再次点击动画视口时，它总是由动画仍在播放。

因为它工作正常。

这是滚动魔术的例子，我想你应该试一试：

http://janpaepke.github.io/ScrollMagic/examples/advanced/advanced_tweening.html

滚动时Jquery CSS动画无法按预期工作

1 个答案: