Системные требования

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

Поддерживаемые браузеры

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

  • Google Chrome — версия 26 и выше.
  • Mozilla Firefox — версия 18 и выше.
  • Safari — версия 6 и выше.
  • Microsoft Edge — версии Chromium (после Edge 79).
  • Opera — версии 12.1 и выше.

Браузеры Internet Explorer 10 и ниже не обеспечивают корректное поведение полноэкранных секций, а некоторые CSS3-анимации могут работать некорректно. Для IE11 поддержка ограничена, возможны баги с анимацией и адаптивным скроллингом.

Поддержка мобильных устройств

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

  • iOS (Safari, Chrome, Firefox) — версия iOS 8 и выше. Поддерживаются сенсорные события для свайпов.
  • Android (Chrome, Firefox, Samsung Internet) — версия Android 4.4 и выше.
  • На устройствах с маленьким экраном рекомендуется использовать параметр responsiveWidth и responsiveHeight для корректного отображения контента.
  • Сенсорные события могут конфликтовать с родными жестами браузера, особенно при горизонтальной прокрутке.

Требования к HTML и CSS

Для корректного функционирования fullPage.js необходимо соблюдать структуру HTML:

  • Основной контейнер должен иметь уникальный идентификатор или класс, передаваемый в new fullpage('#id', options).
  • Каждая секция (section) должна быть дочерним элементом контейнера и иметь одинаковые стили высоты (обычно 100vh).
  • Горизонтальные слайды (slide) должны быть вложены в секции, если используется горизонтальная прокрутка.

CSS-стили должны включать:

  • html, body с высотой 100% (height: 100%;)
  • Отсутствие внешних отступов (margin: 0; padding: 0;)
  • Поддержку overflow: hidden для контейнера при необходимости отключения стандартного скроллинга.

JavaScript и зависимости

Для работы fullPage.js требуется:

  • Vanilla JS (ES5+).
  • Подключение fullpage.min.js и fullpage.min.css.
  • Опционально: библиотеки для дополнительного функционала, например, jquery для старых версий fullPage.js, хотя современные версии работают без jQuery.

Совместимость с ES6 позволяет использовать синтаксис import и модульную структуру:

import fullpage from 'fullpage.js';

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

Системные ресурсы и производительность

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

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

Совместимость с фреймворками

fullPage.js может использоваться с различными фреймворками:

  • React — через официальный react-fullpage или обертку с хуками.
  • Vue.js — через vue-fullpage.js или нативное подключение с mounted.
  • Angular — через директивы или подключение скрипта в компоненте.

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

Ограничения и рекомендации

  • Не рекомендуется использовать fullPage.js на страницах с динамическим изменением высоты секций без вызова методов fullpage_api.reBuild().
  • Адаптивная верстка должна учитывать, что 100vh ведет себя по-разному на мобильных браузерах при появлении панели URL.
  • Для SEO и доступности необходимо добавлять семантические теги внутри секций, так как fullPage.js сам по себе не изменяет структуру DOM.

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

Оглавление