Скорость анимации переходов

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

new fullpage('#fullpage', {
    scrollingSpeed: 1000 // скорость перехода 1 секунда
});

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

Влияние на другие настройки

1. autoScrolling Если параметр autoScrolling установлен в true, scrollingSpeed напрямую управляет скоростью автоматической прокрутки между секциями. При false влияние становится частично заметным только в JavaScript-вызовах программной прокрутки, например:

fullpage_api.moveTo(3); // прокрутка к 3-й секции с установленной скоростью

2. fitToSection Опция fitToSection автоматически подстраивает прокрутку так, чтобы секция занимала весь экран. При этом scrollingSpeed используется как время завершения анимации выравнивания. Если установить fitToSection: false, секции не фиксируются полностью, а скорость анимации уже не контролирует «дотягивание» до секции.

new fullpage('#fullpage', {
    fitToSection: true,
    scrollingSpeed: 1200
});

3. CSS-анимации внутри секций Если внутри секций используются собственные CSS-переходы (transition, animation), синхронизация с scrollingSpeed не происходит автоматически. Для согласованной анимации рекомендуется выравнивать длительность CSS-анимации с scrollingSpeed:

.section-content {
    transition: opacity 1s ease-in-out;
}

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

FullPage.js позволяет изменять скорость переходов после инициализации с помощью метода setScrollingSpeed:

fullpage_api.setScrollingSpeed(500); // уменьшение скорости до 500 мс

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

Анимация переходов при использовании якорей

Если для секций настроены якоря через anchors, прокрутка к конкретной секции также учитывает scrollingSpeed:

<a href="#contact">Контакты</a>

Вызов по якорю (#contact) будет анимирован с текущей скоростью, установленной в параметре scrollingSpeed. Это гарантирует одинаковое поведение при навигации через меню и при прокрутке колесом мыши.

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

  • Согласованность интерфейса: Рекомендуется, чтобы scrollingSpeed соответствовал общему темпу анимаций на сайте. Для спокойного лендинга лучше 800–1000 мс, для динамичных интерфейсов 400–600 мс.
  • Пользовательский опыт: Слишком медленные переходы могут раздражать пользователя, слишком быстрые – создавать ощущение «рывков».
  • Адаптивность: При изменении размеров экрана или ориентации стоит проверять, как скорость влияет на визуальное восприятие и корректно ли завершает анимацию fitToSection.

Совместимость с методами API

Метод moveSectionDown() или moveSectionUp() использует установленную скорость анимации:

fullpage_api.moveSectionDown(); // плавный переход вниз

При вызове методов с параметрами silent (true) анимация игнорируется, и секция перемещается мгновенно, что полезно для скриптового управления без визуальных эффектов:

fullpage_api.moveTo(2, 0, true); // мгновенный переход к первой слайд-секции

Контроль плавности через easing

В версии fullPage.js 4+ можно дополнительно управлять функцией плавности анимации через опцию easing и easingcss3. Значение easeInOutCubic или linear изменяет характер ускорения и замедления:

new fullpage('#fullpage', {
    scrollingSpeed: 1000,
    easing: 'easeInOutCubic',
    easingcss3: 'ease'
});
  • easing влияет на анимацию, когда используется JavaScript-прокрутка.
  • easingcss3 применяется для CSS3-анимации.

Правильное сочетание scrollingSpeed и easing создаёт гармоничное ощущение скролла, предотвращая резкие рывки и визуальные рассогласования.

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

Хотите, чтобы я сразу сделал этот разбор?

Оглавление