Путевые точки js не работают должным образом

Question

Я работаю над веб-сайтом с одностраничной прокруткой. Я использую библиотеку jquery.onepage-scroll.js для макета. И я хочу добавить анимацию, пока прокручиваются разные разделы. Я попытался использовать библиотеку путевых точек для достижения того же, но проблема в том, что события не срабатывают при прокрутке страницы, а когда я нажимаю «Осмотреть элемент» в Chrome, только тогда событие, связанное с путевыми точками (в моем случае, событие является предупреждающим сообщением) увольняется. Я не могу понять здесь точную проблему.

Вот как устроена моя веб-страница:

<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

Я думаю, что есть конфликты между Точкой и jquery.onepage-scroll.js Plugin. Если бы я был вами, я бы переключился на плагин с большим количеством опций, я использовал FullPage.js

Есть еще несколько вариантов, и вы можете делать все, что хотите, например, this, где вы можете добавить пользовательские анимации.

вы можете использовать afterSlideLoad делать все, что вы хотите, когда вы двигаете к 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"); 
     } 

Надежда, что помогает.

Answer 2

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

Вы может получить анимацию, пока он отображается в окне. Вы можете проверить эффект анимации в animate.css.

здесь jsfiffle demo