fullpagejs и AOS - не работают вместе

Я использую fullpagejs и AOS, чтобы некоторые элементы div появлялись в нижней части страницы при прокрутке (или, по крайней мере, это то, чего я хотел бы достичь).

К сожалению, это не работает.

Да, я прочитал раздел часто задаваемых вопросов и да, scrollbar установлен в true а также autoscroll установлен в false,

Моя установка следующая:

<div class="section" id="test">
   <div class="slide">
      <div class="section">
      {someOtherContent}
      <!-- div i want to animate is down below -->
      <div data-aos="slide-up">test</div>
   </div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>


$('#test').fullpage({

  lazyLoading: false,
  lockAnchors: true,

  scrollingSpeed: 300,
  fitToSection: false,
  easing: 'easeInOutCubic',
  easingcss3: 'ease',
  loopHorizontal: false,
  offsetSections: false,
  resetSliders: false,
  scrollOverflow: true,
  scrollOverflowReset: true,
  touchSensitivity: 0,
  bigSectionsDestination: top,


  keyboardScrolling: false,
  animateAnchor: false,
  recordHistory: true,


  controlArrows: false,
  verticalCentered: true,
  responsiveWidth: 0,
  responsiveHeight: 0,


  sectionSelector: '.section',
  slideSelector: '.slide',
  scrollBar:true

  //events
  afterLoad: function (anchor, index( {
    initArrowEventListener()
}

функция события afterLoad просто инициализирует мои ссылки в меню (на основе индекса слайда), и единственная важная часть заключается в том, что я инициализирую AOS когда я нажимаю на одну конкретную ссылку (так как я хочу, чтобы библиотека работала только на определенной странице, а не везде.

Итак, я загружаю страницу, нажимаю, чтобы перейти на нужную мне страницу слайдера, вызывается функция (консольный журнал подтверждает это, а классы AOS применяются к соответствующему div), я вижу полосу прокрутки, но ничего, div не выскакивает снизу.

Есть идеи, что я здесь делаю не так? Спасибо

Эта ручка иллюстрирует ту же проблему. Нажмите "О программе" (функция, которая инициализирует AOS, вызывается так же, как и для заголовка, также работает), прокрутите вниз, и вы увидите много пустого пространства. Если вы осмотрите консоль, aos инициализируется на элементе (его классы применяются), но элемент никогда не скользит вверх)

Источник

1 ответ

Используйте только часть css AOS и подключите aos-animate к обратным вызовам fullpage.js.

Добавьте данные тела AOS вручную

<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">

Добавьте класс aos-init

$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });

Переключить класс aos-animate с помощью обратных вызовов fullpage.js

$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
    $('.section [data-aos]').each(function(){
        $(this).removeClass("aos-animate")
    });
},
onSlideLeave: function(){
    $('.slide [data-aos]').each(function(){
        $(this).removeClass("aos-animate")
    });
},
afterSlideLoad: function(){
    $('.slide.active [data-aos]').each(function(){
        $(this).addClass("aos-animate")
    });
},
afterLoad: function(){
    $('.section.active [data-aos]').each(function(){
        $(this).addClass("aos-animate")
    });
}});

Пример HTML

<div id="fullpage">
<div class="section" id="section0">
    <div class="intro">
        <div data-aos="fade-up">
            <h1>fade me up!</h1>
        </div>
    </div>
</div>
<div class="section" id="section1">
    <div class="slide">
        <div class="intro">
            <div data-aos="zoom-in">
                <h1>zoom me in!</h1>
            </div>
        </div>
    </div>
    <div class="slide">
        <div class="intro">
            <div data-aos="flip-down">
                <h1>flip me down!</h1>
            </div>
        </div>
    </div>
</div>

Источник
Другие вопросы по тегам