Wow.js повторяет анимацию каждый раз при прокрутке вверх или вниз

Я довольно новый с Jquery. Мне бы хотелось, чтобы мои анимации с Wow.js могли запускаться не раз. Например: я прокручиваю до конца моей страницы и вижу все анимации, и если я прокручиваю назад до вершины, я снова вижу анимации, как при прокрутке вниз. Я надеюсь, что я объяснил себе. Я уже видел много сайтов, которые повторяют анимацию на их страницах, но, к сожалению, я их не помню и не могу предоставить ссылку.

Я уже пробовал это:

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

Но это также повторяет анимацию, если вы прокручиваете немного, и это довольно уродливо видеть. Я пытаюсь объяснить мне лучше: у меня есть с моей анимацией, и если она сфокусирована, анимация запускается, затем я прокручиваю вниз до другого div, и предыдущий div больше не виден (не в окне просмотра окна), затем снова я прокручиваю обратно в мой div с анимацией и анимация снова запускается.

Я прошу прощения за этот грязный вопрос, но я действительно не знаю, как это объяснить.

Заранее спасибо!

Источник

3 ответа

Решение

Этот пример Бенуа Букара показывает, как анимация может быть "сброшена", когда пользователь прокручивает из поля зрения и обратно. Ключ здесь - вторая функция, которая удаляет класс CSS анимации, когда элемент прокручивается вне поля зрения. Я бы хотел, чтобы WOW.js это реализовал, но они указали, что не планируют.

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')
   }
});
Источник

Если пользователь хочет повторить анимацию на обоих событиях, т.е.

  • 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

Источник

Ответ @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/
Источник
Другие вопросы по тегам