@ivasenkoartem

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

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

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

Как сделать чтобы при переходе элементов еще не было, а они не появлялись снова?
  • Вопрос задан
  • 467 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Фишка в том, что вам не нужен WOW =)
Всё что делает этот скрипт — навешивает классы на элементы, когда они попадают в поле зрения при скроллинге (вообще не так всё просто, кое-что еще умеет, но по сути так).
У вас есть animate.css — библиотека классов анимашек
У вас есть fullpage.js, у которого есть событие afterSlideLoad
Вот это событие как раз и возникает, когда новый слайд отобразится.

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

Можем еще по событию onSlideLeave вернуть всё обратно, чтобы при следующем переходе анимашки снова отработали.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@NotFair
web-developer
$(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');
                },
            });
        });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы