Скорость перехода между слайдами

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

new fullpage('#fullpage', {
    scrollingSpeed: 1000 // время перехода в миллисекундах
});

В этом примере скорость перехода между секциями составляет 1000 мс (1 секунда). Значение можно увеличивать для более плавного и медленного скролла или уменьшать для более динамичного эффекта.

Настройка скорости для слайдов внутри секций

Для горизонтальных слайдов используется отдельный параметр controlArrows для навигации, однако сама скорость смены слайдов определяется тем же scrollingSpeed. Кроме того, fullPage.js предоставляет возможность программного управления слайдами через методы API:

fullpage_api.moveSlideRight(); // переход к следующему слайду
fullpage_api.moveSlideLeft();  // переход к предыдущему слайду

Если необходимо изменить скорость анимации только для определённого перехода слайда, можно воспользоваться колбэком onSlideLeave:

new fullpage('#fullpage', {
    scrollingSpeed: 700,
    onSlideLeave: function(section, origin, destination, direction){
        // Можно изменять свойства анимации динамически
        fullpage_api.setScrollingSpeed(500);
    }
});

Метод setScrollingSpeed(speed) позволяет менять скорость на лету без перезагрузки страницы. Это удобно, если на одном сайте нужны разные скорости для разных секций.

Взаимодействие с другими параметрами

  • autoScrolling: при включенном автоматическом скролле scrollingSpeed управляет именно анимацией между секциями, а не скроллом страницы.
  • fitToSection: если включена функция привязки к секции (fitToSection: true), скорость анимации будет учитываться при автоматическом выравнивании после прокрутки.
  • continuousVertical и loopHorizontal: при циклической прокрутке параметр scrollingSpeed также применяется, создавая непрерывное и плавное движение между первой и последней секциями/слайдами.

Практические рекомендации

  1. Выбор оптимальной скорости: для больших страниц с мультимедиа лучше использовать более медленные переходы (900–1200 мс), чтобы пользователь успевал воспринимать контент.
  2. Динамическая настройка: при изменении размера окна или устройства можно менять скорость через responsiveWidth/responsiveHeight и колбэки.
  3. Сочетание с CSS-анимациями: если в секции присутствуют анимации элементов, стоит подбирать scrollingSpeed, чтобы переходы не обрезали визуальные эффекты.

Примеры использования в реальных проектах

  • Портфолио с горизонтальными слайдами: на каждом слайде показывается галерея работ, плавный переход помогает удерживать внимание.
  • Лендинг с эффектом «one-page»: разные секции с видео и интерактивными блоками требуют замедленной скорости скролла для комфортного восприятия.
  • Мобильные адаптации: на мобильных устройствах часто используют ускорение переходов (400–600 мс), чтобы навигация не казалась затянутой.

Методы API для управления скоростью динамически

  1. fullpage_api.setScrollingSpeed(speed) – изменяет скорость перехода для всех последующих действий.
  2. fullpage_api.moveSectionUp() и moveSectionDown() – переход к соседней секции с учетом установленной скорости.
  3. Колбэки onLeave и afterLoad – позволяют изменять скорость на основе логики контента или пользовательских действий.

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

Оглавление