Особенности работы на планшетах

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

Сенсорное управление и тач-жесты

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

  • Опция touchSensitivity определяет чувствительность свайпов. На планшетах рекомендуется устанавливать значение выше стандартного, чтобы минимизировать случайные переключения секций при легком касании.

    new fullpage('#fullpage', {
    touchSensitivity: 20,
});

  • Опция normalScrollElements позволяет определить элементы с внутренней прокруткой (например, карусели, списки). Без правильной настройки свайп по таким элементам может вызвать некорректное переключение между секциями.

    normalScrollElements: '.scrollable-content'

  • Опция dragAndMove в последних версиях обеспечивает возможность перетаскивания слайдов пальцем, что удобно для планшетов с горизонтальной навигацией.

Адаптация под ориентацию экрана

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

  • Метод responsiveWidth и responsiveHeight отключает полноэкранный режим при слишком маленькой ширине или высоте, например, в портретном режиме:

    new fullpage('#fullpage', {
    responsiveWidth: 768,
    responsiveHeight: 500,
});

  • Событие afterResize позволяет динамически подстраивать размеры элементов внутри секций при смене ориентации:

    afterResize: function(width, height){
    console.log('Новые размеры: ', width, height);
}

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

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

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

  • Ограничивать количество сложных анимаций и видео на фоне секций.

  • Использовать lazy loading изображений и медиа с помощью опции lazyLoading:

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

  • Применять CSS3 transitions вместо JavaScript-анимаций, так как аппаратное ускорение на планшетах работает лучше с GPU-анимациями.

  • Минимизировать количество параллакс-эффектов, которые требуют постоянного пересчета координат при свайпе.

Работа с слайдами и навигацией

На планшетах горизонтальные слайды требуют дополнительной настройки:

  • Свайп по горизонтали должен быть отключен на элементах с внутренней прокруткой. Используется normalScrollElements с горизонтальной прокруткой.
  • Навигация через точки (navigation) и стрелки (slidesNavigation) остаются актуальными, особенно для небольших экранов, где жесты могут быть менее точными.
  • Для планшетов с сенсорными экранами рекомендуется увеличить зоны клика навигационных стрелок и элементов управления слайдерами.

Особенности прокрутки и инерции

FullPage.js учитывает инерцию прокрутки на сенсорных устройствах:

  • Опция touchWrapper позволяет задать элемент, на котором будет работать тач-обработка. Для планшетов это особенно важно при использовании вложенных прокручиваемых элементов.

  • bigSectionsDestination задает поведение при быстром свайпе: секция может прокручиваться полностью, либо останавливаться на текущей позиции. На планшетах рекомендуется устанавливать top, чтобы избежать неожиданных перескоков секций.

    bigSectionsDestination: 'top'

  • Инерция системы может конфликтовать с внутренним скроллом. В таких случаях рекомендуется отключать autoScrolling на элементах с длинным контентом.

Рекомендации по стилям для планшетов

  • Использовать относительные единицы (vh, %) для секций, чтобы они корректно масштабировались при изменении ориентации.
  • Учитывать зону видимости элементов UI, так как планшеты имеют различное соотношение сторон.
  • Минимизировать мелкие элементы управления, которые тяжело нажимать пальцем.

Адаптивное поведение через события

FullPage.js предоставляет обширный набор событий для контроля работы на планшетах:

  • afterLoad – можно адаптировать контент под текущую секцию.
  • onLeave – позволяет управлять анимациями при смене секции.
  • afterSlideLoad – удобен для динамического изменения элементов слайдов на сенсорных устройствах.
  • Использование этих событий помогает оптимизировать UX, предотвращая случайные свайпы и обеспечивая плавный переход между разделами.

Итоговые настройки для планшетных устройств

Пример конфигурации fullPage.js для планшета:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    touchSensitivity: 25,
    normalScrollElements: '.scrollable-content',
    responsiveWidth: 768,
    responsiveHeight: 500,
    navigation: true,
    slidesNavigation: true,
    bigSectionsDestination: 'top',
    lazyLoading: true,
    afterResize: function(width, height) {
        console.log('Размер изменён: ', width, height);
    }
});

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

Оглавление