Создание собственных обработчиков

Для подключения fullPage.js необходимо создать контейнер с секциями и инициализировать плагин на выбранном элементе. Основная структура HTML выглядит следующим образом:

<div id="fullpage">
    <div class="section" id="section1">Секция 1</div>
    <div class="section" id="section2">Секция 2</div>
    <div class="section" id="section3">Секция 3</div>
</div>

Инициализация через JavaScript позволяет не только включить стандартное поведение скроллинга, но и подключить кастомные обработчики событий:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    scrollingSpeed: 700,
    onLeave: function(origin, destination, direction){
        console.log(`Переход с секции ${origin.index + 1} на секцию ${destination.index + 1}`);
    },
    afterLoad: function(origin, destination, direction){
        console.log(`Секция ${destination.index + 1} загружена`);
    }
});

Здесь onLeave срабатывает до начала анимации перехода между секциями, а afterLoad — после завершения скроллинга.

Основные события и их параметры

fullPage.js предоставляет широкий набор событий, каждый из которых можно использовать для создания собственного поведения:

  1. onLeave(origin, destination, direction)

    • origin — объект исходной секции; содержит index, anchor, item.
    • destination — объект целевой секции; аналогично origin.
    • direction — направление скролла (up или down).

  2. afterLoad(origin, destination, direction) Срабатывает после завершения анимации. Параметры те же, что у onLeave.

  3. afterRender() Срабатывает один раз после полной отрисовки страницы и инициализации всех секций.

  4. afterResize(width, height) Позволяет реагировать на изменение размеров окна.

  5. afterSlideLoad(section, origin, destination, direction) Используется при работе с горизонтальными слайдами внутри секций.

  6. onSlideLeave(section, origin, destination, direction) Срабатывает перед сменой слайда внутри секции.

Создание пользовательских обработчиков

Для реализации индивидуальной логики можно определить функции вне конфигурации и передавать их как коллбеки. Например:

function logSectionLeave(origin, destination, direction){
    console.log(`Секция ${origin.index + 1} → ${destination.index + 1} (${direction})`);
}

function highlightCurrentSection(destination){
    const sections = document.querySelectorAll('.section');
    sections.forEach(s => s.classList.remove('active-section'));
    destination.item.classList.add('active-section');
}

new fullpage('#fullpage', {
    autoScrolling: true,
    onLeave: logSectionLeave,
    afterLoad: highlightCurrentSection
});

Такой подход повышает читаемость кода и позволяет использовать одни и те же функции в нескольких местах.

Управление скроллом и анимациями через события

События fullPage.js можно использовать для запуска кастомных анимаций:

function animateContent(destination){
    const content = destination.item.querySelector('.animate');
    if(content){
        content.style.opacity = 0;
        content.style.transform = 'translateY(50px)';
        setTimeout(() => {
            content.style.transition = 'all 0.6s ease-out';
            content.style.opacity = 1;
            content.style.transform = 'translateY(0)';
        }, 50);
    }
}

new fullpage('#fullpage', {
    afterLoad: animateContent
});

Это позволяет делать плавные появления элементов только при загрузке секции, экономя ресурсы браузера.

Работа с горизонтальными слайдами

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

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
</div>
function logSlideChange(section, origin, destination, direction){
    console.log(`Слайд ${origin.index + 1} → ${destination.index + 1} в секции ${section.index + 1}`);
}

new fullpage('#fullpage', {
    afterSlideLoad: logSlideChange
});

section — объект родительской секции, что позволяет различать слайды разных секций.

Отмена стандартного скролла и добавление кастомной навигации

Можно перехватывать события и блокировать стандартный переход:

function preventScroll(origin, destination, direction){
    if(destination.index === 2){
        return false; // отменяет переход на секцию 3
    }
}

new fullpage('#fullpage', {
    onLeave: preventScroll,
    navigation: true
});

Также можно реализовать собственную навигацию с кнопок:

document.querySelector('#nextSection').addEventListener('click', () => {
    fullpage_api.moveSectionDown();
});

document.querySelector('#prevSection').addEventListener('click', () => {
    fullpage_api.moveSectionUp();
});

fullpage_api — глобальный объект для управления всеми функциями fullPage.js после инициализации.

Комбинирование событий с внешними библиотеками

События fullPage.js можно использовать совместно с анимационными библиотеками, например GSAP:

function animateWithGSAP(destination){
    gsap.fromTo(destination.item.querySelectorAll('.box'),
        {y: 50, opacity: 0},
        {y: 0, opacity: 1, duration: 0.8, stagger: 0.2}
    );
}

new fullpage('#fullpage', {
    afterLoad: animateWithGSAP
});

Это даёт полный контроль над визуальными эффектами, позволяя создавать сложные интерактивные страницы с плавными переходами и анимацией элементов.

Практические рекомендации

  • Разделять обработчики на логические функции для каждой задачи: логирование, анимация, управление классами.
  • Использовать afterRender для начальной подготовки элементов и глобальных переменных.
  • Проверять наличие элементов перед применением анимаций, чтобы избежать ошибок.
  • Для горизонтальных слайдов всегда учитывать родительскую секцию при обработке событий.
  • При блокировке стандартного скролла возвращать false только при необходимости, чтобы не ломать UX.

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

Оглавление