Возможно ли это сделать и есть ли плагины помогающие в этом?

Question

[JetLy]

Нужно создать анимацию на плагине fullpage.js без наличия скроллбара, при этом анимация должна срабатывать, когда часть длинной лендинг страницы вписываеться в экран.

Comments

[Максим Тимофеев]

Каким образом скроллбар влияет на анимацию? Как на них влияет fullpage.js? Не вижу проблемы в вопросе. Переформулируйте.

[JetLy]

Максим Тимофеев: очень часто анимация, привязывается к скроллбару и при перемещении страницы, элементы анимируются, проблема в том, что без скроллбара, анимацию сделать не выходит, либо анимируется вся длинная страница.

[Максим Тимофеев]

JetLy: никогда анимация не привязывается к скролбару. Она привязана к отступу от верха страницы.

[JetLy]

Максим Тимофеев: в общем, при движении скроллбара, идёт анимация, хороший пример плагин scrollmagic.js, если скроллбара нету, анимация не идёт, мне нужно понять, как сделать анимацию, без скроллбара, при переходе на конкретный участок страницы, хорошим примером будет данный сайт: https://www.epicgames.com/unrealtournament/

Answer 1

[Максим Тимофеев]

fullpage.js и скроллбар никак не влияют на возможность сделать анимацию, точнее никак не мешает сделать анимацию.
Если почитать документацию к fullpage.js, тут:
https://github.com/alvarotrigo/fullPage.js#methods
то можно найти методы типа onLeave, в которых запускать нужные анимации. Или вообще делать из через css, так как скрипт добавляет класс для активной секции при переходе к ней, можно вообще только через css анимировать все что Вам надо

Answer 2

[dranets13]

В fullpage.js ведь каждый экран, имеет индекс. Я использовал следующий код, чтобы запустить какое-либо действие на нужной странице

$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
      
      if(index == 2){
        $('.blot-btn').webuiPopover('hide');
      }

      if(index == 3){
        $('.timeline-item-logo').popover('hide');
      }

    },

Comments

[JetLy]

спасибо, большое!