Автоматическая прокрутка

FullPage.js предоставляет встроенные механизмы для организации вертикальной и горизонтальной прокрутки страниц. Автоматическая прокрутка позволяет создавать динамичные презентации или лендинги, где пользовательский интерфейс сам плавно перемещается между секциями без необходимости взаимодействия с мышью или клавиатурой.

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

Настройка таймера для автопрокрутки

Создание автоматической прокрутки требует функции setInterval или setTimeout, которая периодически вызывает методы навигации fullPage.js. Пример базовой реализации:

var autoScrollInterval = setInterval(function(){
    fullpage_api.moveSectionDown();
}, 5000); // каждые 5 секунд

Пояснения:

  • fullpage_api.moveSectionDown() – переход к следующей секции.
  • Интервал задается в миллисекундах.
  • При достижении последней секции необходимо предусмотреть возврат к первой или остановку таймера.

Для возврата к первой секции можно использовать метод moveTo(sectionIndex):

if(fullpage_api.getActiveSection().index === fullpage_api.getTotalSections() - 1){
    fullpage_api.moveTo(1);
}

Контроль автопрокрутки с помощью опций fullPage.js

FullPage.js предоставляет опцию autoScrolling, которая включается при инициализации:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    fitToSection: true
});

Ключевые моменты:

  • autoScrolling: true – включает стандартное поведение скролла fullPage.js.
  • fitToSection: true – обеспечивает автоматическую привязку к ближайшей секции после завершения скролла, что делает автопрокрутку более плавной.
  • scrollHorizontally: true – если секции содержат горизонтальные слайды, автопрокрутка может распространяться на них.

Автопрокрутка с остановкой при взаимодействии пользователя

Чтобы сохранить UX и предотвратить конфликт с ручной прокруткой, часто используют остановку автопрокрутки при наведении или скролле пользователем:

var autoScrollInterval = setInterval(function(){
    fullpage_api.moveSectionDown();
}, 5000);

document.querySelector('#fullpage').addEventListener('mouseenter', function(){
    clearInterval(autoScrollInterval);
});

document.querySelector('#fullpage').addEventListener('mouseleave', function(){
    autoScrollInterval = setInterval(function(){
        fullpage_api.moveSectionDown();
    }, 5000);
});

Пояснения:

  • mouseenter – при наведении мыши автопрокрутка останавливается.
  • mouseleave – возобновление после ухода курсора.
  • Подобный подход обеспечивает плавность и предсказуемость поведения страницы.

Автопрокрутка горизонтальных слайдов

FullPage.js поддерживает горизонтальные слайды внутри секций. Для их автоматической прокрутки используется метод moveSlideRight():

var slideInterval = setInterval(function(){
    var activeSlide = fullpage_api.getActiveSlide();
    if(activeSlide.isLast){
        fullpage_api.moveSectionDown();
    } else {
        fullpage_api.moveSlideRight();
    }
}, 4000);

Особенности:

  • Проверка isLast предотвращает зацикливание на последнем слайде.
  • Комбинируя с вертикальной автопрокруткой, можно создать полноценный слайдер с разделами и слайдами внутри секций.

Настройка скорости и плавности

FullPage.js предоставляет несколько опций, влияющих на плавность автопрокрутки:

new fullpage('#fullpage', {
    scrollingSpeed: 700, // скорость прокрутки в миллисекундах
    easing: 'easeInOutCubic', // плавность анимации
    fitToSection: true
});

Рекомендации:

  • scrollingSpeed подбирается исходя из длительности интервала автопрокрутки, чтобы переход был естественным.
  • easing позволяет задать кривую анимации: 'linear', 'easeInOutCubic', 'easeInOutQuad'.
  • fitToSection: true гарантирует, что прокрутка всегда останавливается точно на секции.

Дополнительные приёмы

  1. Автопрокрутка только для отдельных секций: можно проверять индекс активной секции и запускать интервал только на определённых блоках.
  2. Динамическая скорость: при увеличении контента секции или количества слайдов интервал можно изменять в зависимости от размера секции.
  3. Комбинация с событиями fullPage.js: такие события, как onLeave и afterLoad, позволяют синхронизировать автопрокрутку с появлением анимаций внутри секций.
new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log('Переход из секции', origin.index, 'в секцию', destination.index);
    },
    afterLoad: function(origin, destination, direction){
        if(destination.index === 2){
            // активировать дополнительную анимацию или таймер
        }
    }
});

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

Оглавление