每次向上或向下滚动时，Wow.js都会重复播放动画 [英] Wow.js repeat animation every time you scroll up or down

问题描述

我对Jquery很陌生.我希望Wow.js的动画可以运行多次.例如:我滚动到页面底部并查看所有动画，如果我滚动回到顶部，则再次看到动画，就像向下滚动一样.我希望我自己解释一下.我已经看到很多网站在其页面上重复播放动画，但是很遗憾，我不记得它们了，因此无法提供链接.

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.

我已经尝试过:

$(window).scroll(function(){
    new WOW().init();
}

但是如果您稍微滚动一下，它也会重复播放动画，很难看清.我尝试更好地向我解释:我的动画有一个，如果聚焦动画被触发，则向下滚动到另一个div，而上一个div不再可见(不在窗口视口中)，然后再次滚动回到我的div动画中，动画又被触发了.

But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.

对于这个麻烦的问题，我感到抱歉，但是我真的不知道该怎么解释.

I'm sorry for this messy question but I really don't know how to explain it.

提前谢谢！

推荐答案

BenoîtBoucart的示例演示了如何在用户滚动出视图并向后滚动时重置"动画.此处的键是第二个功能当元素滚动到视图外时，删除动画css类.我希望WOW.js能够实现这一点，但是他们表示他们不打算这样做.

This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.

http://codepen.io/benske/pen/yJoqz

摘要:

// Showed...
$(".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...
$(".revealOnScroll.animated").each(function (index) {
   var $this     = $(this),
       offsetTop = $this.offset().top;
   if (scrolled + win_height_padded < offsetTop) {
     $(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
   }
});

这篇关于每次向上或向下滚动时，Wow.js都会重复播放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！