Waypoints js가 예상대로 작동하지 않습니다.

Question

한 페이지 스크롤 레이아웃이있는 웹 사이트에서 작업하고 있습니다. 레이아웃을 위해 jquery.onepage-scroll.js 라이브러리를 사용하고 있습니다. 그리고 나는 다른 섹션이 스크롤되는 동안 애니메이션을 추가하고 싶습니다. 나는 waypoints 라이브러리를 사용하여 같은 것을 달성하려했지만 문제는 페이지를 스크롤 할 때 이벤트가 발생하지 않는다는 것입니다. Chrome에서 "Inspect element"를 클릭하면 이벤트가 웨이 포인트와 연관됩니다 (내 경우에는, 이벤트가 경고 메시지 임)가 발사 됨. 나는 정확한 문제를 여기에서 파악할 수 없다.

<div class="main"> 
<section id="page1"></section> 
<section id="page2"></section> 
<section id="page3"></section> 
</div> 

그리고 여기 그것이 작동하는 경우 난 그냥 확인하는 웨이 포인트 기능에 대한 경고를 연결 한 방법은 다음과 같습니다 : 여기

내 웹 페이지가 어떻게 구성되어 있는지입니다

$("section#page2").waypoint(function(){ 
      alert('waypoint ok'); 
     }); 

Answer 1

입니다. 만약 내가 당신이라면 더 많은 옵션을 가진 플러그인으로 전환 할 것입니다. FullPage.js

더 많은 옵션이 있으며 사용자 정의 애니메이션을 추가 할 수있는 this과 같은 무엇이든 할 수 있습니다.

당신은 당신이 도움이 cetain 페이지

afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 

     //first slide of the second section 
     if(anchorLink == 'secondPage' && slideIndex == 1){ 
      alert("First slide loaded"); 
     } 

     //second slide of the second section (supposing #secondSlide is the 
     //anchor for the second slide 
     if(index == 2 && slideIndex == 'secondSlide'){ 
      alert("Second slide loaded"); 
     } 

희망에 슬라이드하면 당신이 원하는 무엇이든 할 afterSlideLoad를 사용할 수 있습니다.

Answer 2

 <h1 class="animated" data-animation="fadeInDown" data-revert="fadeOutDown">Some Animation Here</h1> 

당신 그가 창에서 태그를 표시하는 동안 애니메이션을 얻을 수 있습니다. animate.css에서 애니메이션 효과를 확인할 수 있습니다.

는 여기에 내가 웨이 포인트와 jquery.onepage - scroll.js 플러그인 사이에 충돌이 생각 jsfiffle demo