Динамическое добавление секций

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.25/fullpage.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.25/fullpage.min.js"></script>

Основная структура страницы для fullPage.js строится вокруг контейнера с классом #fullpage, внутри которого располагаются секции с классом .section:

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

Инициализация производится через вызов конструктора:

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

Методы для динамического добавления секций

FullPage.js предоставляет встроенные методы для работы с динамическими секциями. Основные из них:

  1. fullpage_api.addSection() Добавляет новую секцию в конец контейнера. Может принимать HTML-код секции или элемент DOM.
fullpage_api.addSection('<div class="section">Новая секция</div>');
  1. fullpage_api.addSection(index, element) Позволяет вставить секцию на конкретную позицию, задаваемую индексом (начало нумерации — 1).
// Вставка перед третьей секцией
fullpage_api.addSection(3, '<div class="section">Вставленная секция</div>');
  1. fullpage_api.moveTo(sectionIndex) После добавления новой секции часто требуется перейти к ней автоматически.
fullpage_api.moveTo(fullpage_api.getTotalSections());

Динамическое добавление контента внутри секций

Для более сложных интерфейсов fullPage.js поддерживает вертикальные и горизонтальные слайды. Чтобы добавить горизонтальные слайды в уже существующую секцию, используют:

fullpage_api.addSlide(sectionIndex, '<div class="slide">Новый слайд</div>');

Если необходимо создать секцию с несколькими слайдами сразу, можно сформировать HTML заранее и передать его через addSection.

Работа с событиями при добавлении секций

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

  • afterLoad – срабатывает после загрузки новой секции.
  • onLeave – срабатывает перед уходом с секции.
  • afterRender – вызывается после инициализации fullPage.js, полезно для начального динамического построения.

Пример: при добавлении новой секции автоматически присваиваем ей уникальный идентификатор и добавляем анимацию:

const newSection = document.createElement('div');
newSection.classList.add('section');
newSection.id = `section-${fullpage_api.getTotalSections() + 1}`;
newSection.innerHTML = '<h2>Динамическая секция</h2>';

fullpage_api.addSection(newSection);

newSection.addEventListener('animationend', () => {
  console.log(`Секция ${newSection.id} полностью загружена`);
});

Удаление и перестройка секций

FullPage.js позволяет не только добавлять, но и удалять секции динамически:

fullpage_api.removeSection(sectionIndex);

Важно помнить, что индексация секций меняется после удаления, поэтому последующие вызовы addSection или moveTo нужно корректировать.

Если требуется перестроить структуру полностью, допустимо использовать метод fullpage_api.destroy('all'), после чего можно заново инициализировать fullPage.js с обновленной разметкой.

Адаптивное добавление секций

Для интерфейсов, где контент загружается по мере прокрутки (infinite scroll), можно комбинировать методы addSection и события onLeave:

fullpage_api.setAllowScrolling(true);

fullpage_api.on('onLeave', (origin, destination, direction) => {
  if (destination.index === fullpage_api.getTotalSections() - 1) {
    fullpage_api.addSection('<div class="section">Следующая динамическая секция</div>');
  }
});

Такой подход обеспечивает плавное расширение страницы без перезагрузки и сохраняет навигацию fullPage.js.

Оптимизация производительности

При частом динамическом добавлении секций стоит учитывать:

  • Использовать готовые DOM-элементы вместо строки HTML для уменьшения нагрузки на парсер.
  • Избегать избыточных анимаций при массовом добавлении секций.
  • Применять события fullPage.js только для реально необходимых действий, чтобы не перегружать обработчики.

Эти рекомендации обеспечивают стабильную работу на больших проектах с десятками и сотнями динамических секций.

Оглавление