Как подружить fullpage и wow?

Question

[ivasenkoartem]

$(document).ready(function() {
      $('#fullpage').fullpage({
        anchors:['main', 'about'],
        scrollingSpeed: 600,
        afterLoad: function(){
              new WOW().init();
        }
      });
    });

При переходе на другой блок:
1) Элементы на странице
2) Через секунду они пропадают
3) И появляются снова, но уже без анимации

Как сделать чтобы при переходе элементов еще не было, а они не появлялись снова?

Comments

[alex]

на фидл выложите код

Answer 1

[Сергей delphinpro]

Фишка в том, что вам не нужен WOW =)
Всё что делает этот скрипт — навешивает классы на элементы, когда они попадают в поле зрения при скроллинге (вообще не так всё просто, кое-что еще умеет, но по сути так).
У вас есть animate.css — библиотека классов анимашек
У вас есть fullpage.js, у которого есть событие afterSlideLoad
Вот это событие как раз и возникает, когда новый слайд отобразится.

Имея всё это, мы раскидываем по нужным элементам какой-то инит-класс, скрывающий элемент до поры (не display:none!), а после наступления события довешиваем еще классов для срабатывания анимации (смотрите документацию и исходники animate.css)

Можем еще по событию onSlideLeave вернуть всё обратно, чтобы при следующем переходе анимашки снова отработали.

Comments

[ivasenkoartem]

Спасибо за помощь! Можете помочь с js скриптом?

Answer 2

[Pavlo Marchenko]

$(document).ready(function() {
            $('#fullpage').fullpage({
                scrollBar:true,   
                afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){

                    if ( slideIndex != 0 ) {
                        wow = new WOW(
                            {
                                animateClass: 'animated',
                                live: true
                            }
                        );
                        wow.init();
                    }
                },
                onSlideLeave: function(anchorLink, index, slideIndex, direction){
                    $('.slide').not('.slide-' + slideIndex).find('.wow').css('visibility', 'hidden');
                },
            });
        });

Comments

[ivasenkoartem]

Спасибо, что скопировали чужой ответ, который мне не подходит!

[Pavlo Marchenko]

ivasenkoartem, я тебе скинул код который позволяет работать wow.js и fullpage.js вместе, в чем проблема?

[Pavlo Marchenko]

ivasenkoartem, если ты не знаешь как реализовать, это уже совсем другой вопрос