Настройка скорости прокрутки

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

Параметр scrollingSpeed

Основным инструментом управления скоростью является опция scrollingSpeed, задаваемая при инициализации fullPage.js:

new fullpage('#fullpage', {
    scrollingSpeed: 700 // время прокрутки в миллисекундах
});
  • Значение задается в миллисекундах.
  • По умолчанию: 700 мс.
  • Позволяет контролировать скорость анимации при переходе между секциями.

Пример с разными значениями:

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

new fullpage('#fullpage', {
    scrollingSpeed: 400 // быстрая прокрутка
});

Изменение скорости влияет только на анимацию, а не на мгновенный переход через API.

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

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

fullpage_api.setScrollingSpeed(1000); // устанавливаем новую скорость

Особенности использования:

  • Метод может вызываться в любое время после инициализации.
  • Влияет на следующую прокрутку, а не на текущую анимацию.
  • Подходит для адаптивного изменения скорости, например, при изменении ширины экрана или при прокрутке определённого контента.

Пример динамического изменения в зависимости от ширины окна:

window.addEventListener('resize', () => {
    if (window.innerWidth < 768) {
        fullpage_api.setScrollingSpeed(400);
    } else {
        fullpage_api.setScrollingSpeed(900);
    }
});

Управление скоростью с помощью событий

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

new fullpage('#fullpage', {
    scrollingSpeed: 700,
    onLeave: function(origin, destination, direction){
        if(destination.index === 2){ // третья секция
            fullpage_api.setScrollingSpeed(1500); // замедляем
        } else {
            fullpage_api.setScrollingSpeed(700); // стандартная скорость
        }
    }
});
  • onLeave срабатывает перед переходом на новую секцию.
  • Позволяет задавать индивидуальную скорость для каждой секции.
  • Используется для усиления визуального эффекта при сложных анимациях или интерактивных блоках.

Влияние параметра autoScrolling

Скорость прокрутки работает только при включённом autoScrolling:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollingSpeed: 800
});
  • Если autoScrolling выключен (false), секции будут прокручиваться стандартным скроллом браузера, а scrollingSpeed не оказывает влияния.
  • Оптимальная комбинация: autoScrolling: true + корректная настройка scrollingSpeed для плавной анимации.

Настройка скорости при навигации с клавиатуры и скроллом мыши

fullPage.js учитывает scrollingSpeed при прокрутке:

  • с помощью колесика мыши,
  • стрелок клавиатуры,
  • свайпов на мобильных устройствах.

Пример ускоренной прокрутки для мобильных устройств:

new fullpage('#fullpage', {
    scrollingSpeed: window.innerWidth < 480 ? 400 : 700
});
  • Можно комбинировать с fitToSection, чтобы ускорять или замедлять автоматическую подстройку к секции.
  • Не влияет на переходы через якоря (anchors) — для них скорость также регулируется глобально через scrollingSpeed.

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

  • Для лендингов с минималистичной анимацией — скорость 700–900 мс.
  • Для презентаций с тяжелой анимацией — 1200–1500 мс, чтобы зритель успевал воспринять информацию.
  • Для мобильных устройств — 400–600 мс, чтобы переходы не казались слишком медленными.
  • Использовать динамическое изменение через setScrollingSpeed при необходимости адаптивного поведения.
  • Синхронизировать скорость с плагинами анимации (например, GSAP), чтобы эффект оставался плавным и гармоничным.

Вывод

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

Оглавление