Изменения в API между версиями

fullPage.js, как библиотека для создания полноэкранных скроллируемых сайтов на JavaScript, эволюционирует с каждой новой версией. Понимание изменений в API позволяет корректно обновлять существующие проекты и использовать новые возможности без конфликтов.

Изменения в инициализации

Ранее, в версиях до 3.x, инициализация происходила через передачу объекта конфигурации в конструктор jQuery:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    navigation: true
});

В версии 3.x и выше поддержка jQuery была удалена, и библиотека теперь использует чистый Jav * aScript:

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
    navigation: true
});

Ключевые изменения:

  • Удалена зависимость от jQuery.
  • Инициализация выполняется через new fullpage(selector, options).
  • Методы теперь вызываются через объект fullpage_api.

Методы API

Ранее:

$.fn.fullpage.moveSectionDown();

Сейчас:

fullpage_api.moveSectionDown();

Все глобальные вызовы через $().fullpage заменены на методы объекта fullpage_api. Это изменение гарантирует, что API больше не конфликтует с другими библиотеками.

Основные методы:

  • moveSectionUp() и moveSectionDown() – переход между секциями.
  • moveTo(section, slide) – переход к указанной секции или слайду.
  • silentMoveTo(section, slide) – переход без анимации.
  • setAutoScrolling(boolean) – включение или отключение авто-прокрутки.
  • setScrollingSpeed(speed, type) – установка скорости скролла и типа анимации.

События (Callbacks)

В новых версиях структура событий изменилась. Ранее события регистрировались через объект конфигурации:

$('#fullpage').fullpage({
    afterLoad: function(origin, destination, direction){
        console.log(destination.index);
    }
});

Теперь используются колбэки в объекте опций, но их сигнатура изменилась:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log(destination.index);
    }
});

Особенности новых событий:

  • origin – объект с информацией о секции, с которой осуществляется переход.
  • destination – объект секции назначения, содержит index, anchor и DOM-элемент item.
  • direction – направление перехода: 'up' или 'down'.

Работа с слайдами

Ранее слайды внутри секции использовались через jQuery-методы:

$.fn.fullpage.moveSlideRight();

В новых версиях:

fullpage_api.moveSlideRight();

Для получения текущего слайда применяется:

let activeSlide = fullpage_api.getActiveSlide();

Возвращаемый объект содержит свойства index, anchor и DOM-элемент item.

Опции конфигурации

Некоторые опции были переименованы или удалены:

Старая опция Новая опция / Изменение
css3 Всегда включено, удалена необходимость указания
scrollingSpeed Принимает второй параметр type для управления easing
anchors Без изменений, но теперь работают напрямую с API
lockAnchors Убрана, заменено поведением afterLoad и onLeave

Устаревшие функции

  • destroy('all') теперь вызывается через fullpage_api.destroy('all').
  • Методы jQuery типа $('#fullpage').fullpage.destroy() больше не поддерживаются.
  • Поддержка старых событий onLeave, afterLoad через jQuery-объект удалена; использовать только API через объект инициализации.

Примеры перехода с версии 2.x на 3.x

Старый код:

$('#fullpage').fullpage({
    navigation: true,
    anchors: ['home', 'about', 'contact'],
    afterLoad: function(anchorLink, index){
        console.log('Loaded section ' + index);
    }
});

Новый код:

new fullpage('#fullpage', {
    navigation: true,
    anchors: ['home', 'about', 'contact'],
    afterLoad: function(origin, destination, direction){
        console.log('Loaded section ' + destination.index);
    }
});

Обратите внимание: изменение сигнатуры событий и отказ от jQuery.

Миграция кастомных стилей и событий

  • Все селекторы должны использовать чистый CSS/JS (document.querySelector или document.querySelectorAll) вместо jQuery.
  • Для динамического изменения опций применяется метод fullpage_api.setOption('optionName', value).
  • Для добавления событий, таких как скролл на слайде, использовать API-колбэки вместо прямого присваивания функций jQuery.

Итоговая структура кода

// Инициализация
const myFullpage = new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    anchors: ['first', 'second', 'third'],
    afterLoad: function(origin, destination, direction){
        console.log('Секция ' + destination.index + ' загружена');
    }
});

// Управление слайдерами
fullpage_api.moveTo('second', 0);
fullpage_api.moveSlideRight();

// Настройка опций на лету
fullpage_api.setAutoScrolling(false);
fullpage_api.setScrollingSpeed(700);

Эти изменения делают API более консистентным, удобным для использования без jQuery и расширяют возможности для кастомизации и интеграции с современными фреймворками.

Оглавление