Wow.js每次向上或向下滾動都會重複動畫

Question

我對Jquery很新穎。我希望我的Wow.js動畫可以運行多次。例如：我滾動到我的頁面的底部，看到所有的動畫，如果我滾動回到頂部，我再次看到動畫，當你向下滾動。我希望我解釋一下自己。我已經看到很多網站重複他們的網頁上的動畫，但不幸的是我不記得他們，我不能提供一個鏈接。

我已經嘗試過這樣的：

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

但重複的動畫，如果你還滾動了一點，這是很醜陋看到的。我試圖更好地解釋我：我有一個與我的動畫，如果它的焦點動畫觸發，然後我滾動到另一個div和前一個div不可見（不在窗口視口），然後再次滾動回到我的動畫，並再次觸發動畫。

我很抱歉這個混亂的問題，但我真的不知道如何解釋它。

在此先感謝！

Answer 1

BenoîtBoucart的這個例子展示了當用戶滾動視圖並返回時動畫可以「重置」。這裏的關鍵是第二個函數，當元素滾動出視圖時，它將移除動畫CSS類。我希望WOW.js能夠實現這一點，但他們表示他們不打算這樣做。

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') 
    } 
}); 

Answer 2

如果用戶想要重複上兩個事件即

• onScrollUp
• onScrollDown
動畫

那麼這將是它一個很好的解決方案：

首先創建一個addBox功能，這將有助於推動新的元素融入WOW盒陣列。

WOW.prototype.addBox = function(element){ 
    this.boxes.push(element); 
}; 

然後使用jQuery和scrollspy插件，可以檢測哪一個元素是從視圖中，然後推WOW爲：

$('.wow').on('scrollSpy:exit',function(){ 
    var element = $(this); 
    element.css({ 
     'visibility' : 'hidden', 
     'animation-name' : 'none' 
    }).removeClass('animated'); 
    wow.addBox(this); 
}); 

解決方案提供者：ugurerkan

Answer 3

回答通過@vivekk是正確的我只是添加一個工作示例，以便人們可以很容易地得到這個

看到小提琴

  <script> 
     // Repeat demo content 
      var $body = $('body'); 
      var $box = $('.box'); 
      for (var i = 0; i < 20; i++) { 
      $box.clone().appendTo($body); 
      } 

      // Helper function for add element box list in WOW 
     WOW.prototype.addBox = function(element) { 
     this.boxes.push(element); 
     }; 

     // Init WOW.js and get instance 
     var wow = new WOW(); 
     wow.init(); 

     // Attach scrollSpy to .wow elements for detect view exit events, 
     // then reset elements and add again for animation 
     $('.wow').on('scrollSpy:exit', function() { 
     $(this).css({ 
     'visibility': 'hidden', 
     'animation-name': 'none' 
     }).removeClass('animated'); 
     wow.addBox(this); 
     }).scrollSpy(); 

     </script> 
     https://jsfiddle.net/ugurerkan/53641ovn/