Waypoints js не работает должным образом

Я работаю над веб-сайтом с одностраничным макетом прокрутки. Я использую библиотеку 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');
        });

html jquery jquery-waypoints
person jigargm    schedule 22.04.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

вы можете использовать afterSlideLoad, чтобы делать все, что хотите, как только вы перейдете на определенную страницу

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");
        }

Надеюсь, это поможет.

person Amir5000    schedule 23.04.2014
comment
Большое спасибо. Ваш ответ действительно помог мне разобраться в проблеме. - person jigargm; 23.04.2014

arrow_upward
0
arrow_downward 

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

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

вот демонстрация jsfiffle

person Marmik Desai    schedule 23.04.2014