scrollReveal에 대한 jQuery 및 animate.css

Question

스크롤 효과에 대한 공개를 만들려고 시도했지만 여러 플러그인을 시도했지만 원하는 내용과 찾을 수없는 항목을 찾을 수 없습니다. 내가 원하는 것을하기 위해 그것을 효과적으로 구현하는 방법에 대해 확신하지 못한다.

나는 내가 놀고있는이 자바 스크립트 코드를 가지고있다.

$(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

불투명도로 작동하는 애니메이션은 불투명도를 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); 
       } 

      }); 

     }); 
    });