Метод setScrollingSpeed

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

Синтаксис метода:

fullpage_api.setScrollingSpeed(value);

  • value — числовое значение, задающее длительность анимации прокрутки в миллисекундах.

    • Например, 700 соответствует 700 миллисекундам на одну прокрутку.
    • По умолчанию fullPage.js использует 700 мс, если скорость не была изменена.

Основные особенности

  1. Динамическое изменение скорости Скорость можно менять в любой момент работы страницы. Например, при определенных событиях, таких как клик по кнопке или достижение определенной секции:
// Устанавливаем медленную прокрутку
fullpage_api.setScrollingSpeed(1500);

// Через несколько секунд возвращаем стандартную скорость
setTimeout(() => {
    fullpage_api.setScrollingSpeed(700);
}, 3000);

  1. Влияние на все типы скролла Метод изменяет скорость как вертикального, так и горизонтального скролла, если включена навигация по слайдам (slidesNavigation: true). При этом скорость применяется ко всем последующим переходам.

  2. Интерактивная настройка для пользовательских сценариев Позволяет создавать эффект ускоренного или замедленного скролла в зависимости от контекста. Например, можно сделать быстрый скролл при нажатии на определенную кнопку «Пропустить секцию» и медленный — для обычной навигации.

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

Изменение скорости на определенной секции:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(destination.index === 2){ // третья секция
            fullpage_api.setScrollingSpeed(2000); // медленная прокрутка
        } else {
            fullpage_api.setScrollingSpeed(700); // стандартная скорость
        }
    }
});

Адаптация скорости под разные устройства:

if(window.innerWidth < 768){
    fullpage_api.setScrollingSpeed(1000); // для мобильных устройств медленнее
} else {
    fullpage_api.setScrollingSpeed(700); // для десктопов стандартная
}

Использование с пользовательскими кнопками:

document.querySelector('#fastScroll').addEventListener('click', () => {
    fullpage_api.setScrollingSpeed(300);
    fullpage_api.moveSectionDown();
});

Важные нюансы

  • Значение скорости в миллисекундах напрямую влияет на плавность перехода: слишком низкое значение может сделать прокрутку резкой, слишком высокое — замедленной и утомительной для пользователя.
  • Метод не влияет на уже выполняющуюся анимацию; изменения вступают в силу только при следующей прокрутке.
  • Совместим с большинством настроек fullPage.js, включая autoScrolling, scrollHorizontally, continuousVertical.
  • Использование метода в сочетании с setAllowScrolling позволяет полностью контролировать поведение скролла: можно одновременно изменять скорость и разрешать или запрещать скролл для определенных секций.

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

  • Для сайтов с динамическим контентом и анимациями рекомендуется использовать значения в диапазоне 500–1500 мс, чтобы сохранить ощущение плавности.
  • При создании интерактивных эффектов, таких как ускоренный скролл при прокрутке вниз или замедление на ключевых секциях, необходимо тщательно тестировать на разных устройствах, чтобы не нарушить UX.
  • Для мобильных устройств целесообразно слегка увеличить скорость, так как пользователи привыкли к более медленному скроллу пальцем.

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

Оглавление