Breakpoints для адаптивности

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

Основные принципы работы breakpoints

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

В fullPage.js поддерживаются два основных параметра:

  • responsiveWidth – задаёт ширину экрана, при которой fullPage.js перестаёт работать в полноэкранном режиме.
  • responsiveHeight – задаёт высоту экрана, при которой происходит аналогичное поведение.

Пример базовой инициализации с breakpoints:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    responsiveWidth: 768,  // ниже 768px отключается autoScrolling
    responsiveHeight: 600  // ниже 600px отключается autoScrolling
});

В этом примере при ширине окна меньше 768px или высоте меньше 600px скрипт автоматически отключает autoScrolling, что делает сайт более удобным для мобильных устройств.

Использование responsiveWidth и responsiveHeight

responsiveWidth

  • Управляет поведением fullPage.js при изменении ширины экрана.
  • Чаще всего используется для мобильных устройств.
  • Позволяет отключать авто-прокрутку и фиксированные секции, заменяя их на стандартный скролл страницы.
responsiveWidth: 1024

В данном случае при ширине экрана 1024px и меньше включается адаптивное поведение. Можно совместить с кастомными CSS-классами для изменения стилей секций.

responsiveHeight

  • Менее часто используется, но полезна для планшетов и небольших экранов.
  • Позволяет управлять поведением сайта при ограниченной высоте окна браузера.
responsiveHeight: 500

Если высота окна меньше 500px, fullPage.js автоматически переходит в обычный скролл.

Полный контроль через события

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

  • afterResponsive – вызывается каждый раз, когда fullPage.js переходит в адаптивный режим или возвращается из него.
new fullpage('#fullpage', {
    responsiveWidth: 768,
    afterResponsive: function(isResponsive){
        if(isResponsive){
            console.log('Адаптивный режим включён');
        } else {
            console.log('Возврат к полноэкранному режиму');
        }
    }
});

Используя afterResponsive, можно динамически изменять стили, скрывать элементы или подгружать контент в зависимости от текущего режима.

Кастомизация поведения секций на разных разрешениях

Помимо глобальных breakpoints, можно использовать CSS вместе с JavaScript для тонкой настройки секций. Например, можно скрывать блоки навигации на мобильных устройствах:

@media (max-width: 768px) {
    .fp-nav {
        display: none !important;
    }
}

Или изменять размеры элементов внутри секций:

@media (max-width: 768px) {
    .section-content {
        font-size: 14px;
        padding: 20px;
    }
}

Таким образом, breakpoints в fullPage.js работают в связке с CSS и позволяют полностью контролировать адаптивность сайта.

Динамическое изменение параметров

FullPage.js версии 4+ поддерживает метод setResponsive, который позволяет вручную включать или отключать адаптивный режим без изменения размеров окна:

fullpage_api.setResponsive(true);  // включение адаптивного режима
fullpage_api.setResponsive(false); // отключение адаптивного режима

Это полезно, если нужно переключать поведение скролла на основе пользовательских действий, например при открытии меню или модального окна.

Советы по использованию breakpoints

  1. Начинать с ширины мобильных устройств – обычно 768px для планшетов и 480px для смартфонов.
  2. Использовать afterResponsive для динамических изменений – это позволяет подгружать контент или менять интерфейс без перезагрузки страницы.
  3. Комбинировать с CSS-медиа-запросами – fullPage.js меняет скриптовое поведение, а CSS управляет визуальными стилями.
  4. Тестировать на разных устройствах – эмуляция браузера не всегда показывает точное поведение, особенно при низкой высоте экрана.

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

Оглавление