jQuery & animate.css для scrollReveal

Question

Я пытался создать раскладку по эффекту прокрутки, я попробовал несколько плагинов, но я не могу найти ни одного из них, которые соответствуют тому, что я ищу, и если они делают Im не уверен в том, как эффективно реализовать его, чтобы делать то, что я хочу.

У меня есть этот фрагмент кода JavaScript, с которым я играл;

$(document).ready(function(){ 
     $(window).scroll(function(){ 
      $('.hideme').each(function(i){ 
       var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
       var bottom_of_window = $(window).scrollTop(); + $(window).height(); 
       if(bottom_of_window > bottom_of_object){ 
        $(this).addClass('animated fadeInUp', 1000); 
       } 
      }); 
     }); 
    }); 

Проблема заключается в том, что анимация добавляется только один раз это с экрана, так что я должен прокрутить прошлое, где я хотел бы, чтобы анимация вступила в силу для того, чтобы реально работать. Я не уверен, как заставить JS реализовать код animate.css, как только элемент будет выглядеть в окне/браузере.

Еще одна вещь, которую я пытаюсь сделать, - удалить класс с помощью метода jQuery (removeClass), но он просто скрывается, а объекты шоу без анимации.

Я использовал gif, чтобы проиллюстрировать мою проблему (извините за то, что она такая маленькая).

Существует также JsFiddle для дальнейшей иллюстрации моей проблемы; https://jsfiddle.net/1hwpswow/

Answer 1

Anímate css работает с непрозрачностью, вы устанавливаете непрозрачность 0 и анимация должна работать! Кроме того, вы должны удалить и добавить класс анимированного css каждый раз, когда вы его используете!

Answer 2

Установите начальный край и удалите его после прокрутки полного расстояния, равного высоте окна. вот скрипку: https://jsfiddle.net/Carr1005/1hwpswow/2/

$(document).ready(function(){ 

    $('.hideme').eq(0).css('margin-top',$(window).height());  
    $(window).scroll(function(){ 

     console.log($(window).scrollTop()); 
     console.log($(window).height()); 
     if($(window).scrollTop() >= $(window).height()) 
     $('.hideme').eq(0).css('margin-top',0); 

     $('.hideme').each(function(i){ 

     var top_of_object = $(this).offset().top; 
       var bottom_of_window = $(window).scrollTop() + $(window).height(); 
       if(bottom_of_window > top_of_object){ 
        $(this).addClass('animated fadeInUp', 1000); 
       } 

      }); 

     }); 
    });