Wow.js repeat animation every time you scroll up or down

前端 未结 3 1848
后悔当初
后悔当初 2021-02-04 19:48

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 animation

3条回答
  •  不知归路
    2021-02-04 20:28

    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

    Snippet:

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

提交回复
热议问题