Скорость и длительность анимации

Библиотека Smooth Scroll предоставляет гибкий контроль над поведением прокрутки, позволяя задавать параметры скорости и длительности анимации. Эти параметры определяют, как быстро страница перемещается к целевому элементу, а также ощущение плавности и естественности движения.

Параметр speed

speed — это основной параметр, который отвечает за скорость анимации прокрутки. Он задается в миллисекундах и определяет время, за которое произойдет переход к указанному элементу.

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

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800, // анимация займет 800 мс
});
  • Малое значение (например, 300) создаёт ощущение быстрой прокрутки.
  • Большое значение (например, 1200) делает движение медленным и плавным.

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

Параметр speedAsDuration

По умолчанию Smooth Scroll рассчитывает длительность анимации исходя из расстояния до цели. Параметр speedAsDuration позволяет зафиксировать скорость по времени, игнорируя расстояние.

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 600,
    speedAsDuration: true, // длительность анимации не зависит от расстояния
});
  • true — время анимации фиксировано независимо от длины прокрутки.
  • false — длительность пропорциональна расстоянию до цели, создавая ощущение постоянной скорости движения.

Использование speedAsDuration: true полезно для страниц с короткими секциями, когда нужно гарантировать, что переход всегда займёт одинаковое время.

Параметр easing

Для более естественного движения можно применять функцию сглаживания (easing). Она влияет на то, как меняется скорость анимации в процессе прокрутки: ускоряется в начале, замедляется в конце и наоборот.

Пример с пользовательской функцией:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 800,
    easing: 'easeInOutCubic'
});

Популярные предустановленные варианты:

  • linear — равномерная скорость движения.
  • easeInQuad — медленный старт, ускорение в середине.
  • easeOutQuad — быстрое начало, замедление к концу.
  • easeInOutCubic — плавное ускорение и замедление, наиболее естественное ощущение.

Функция easing обеспечивает визуальный комфорт, особенно при длинных прокрутках или сложных анимационных эффектах.

Комбинирование скорости и easing

Для тонкой настройки плавности анимации рекомендуется сочетать скорость (speed) с функцией easing.

Пример:

const scroll = new SmoothScroll('a[href*="#"]', {
    speed: 1000,          // длительность 1 секунда
    speedAsDuration: false,
    easing: 'easeInOutCubic'
});

В этом примере:

  • Анимация занимает одну секунду при стандартной расчётной скорости.
  • Движение плавное и естественное благодаря easeInOutCubic.

Такой подход позволяет добиться ощущения, что страница реагирует «живым» движением, а не резким скачком.

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

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

Пример:

document.querySelectorAll('a[href*="#"]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        const distance = target.getBoundingClientRect().top;

        const scroll = new SmoothScroll();
        scroll.animateScroll(target, null, {
            speed: distance < 500 ? 500 : 1000,
            easing: 'easeInOutCubic'
        });
    });
});
  • Для коротких переходов скорость снижается (500 мс).
  • Для длинных — увеличивается (1000 мс).
  • Сохранение easing обеспечивает единый визуальный стиль анимации.

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

  • Для мелких страниц достаточно скорости 500–700 мс с easeInOutCubic.
  • Для длинных страниц лучше увеличить скорость до 1000–1200 мс и использовать speedAsDuration: false для пропорциональной длительности.
  • Для плавных интерфейсов с множеством якорей рекомендуется единый easing для всех переходов, чтобы пользователь ощущал стабильное движение.
  • При сочетании с другими анимациями, такими как появление элементов при скролле, длительность прокрутки должна быть синхронизирована с визуальными эффектами.

С помощью точной настройки speed, speedAsDuration и easing Smooth Scroll позволяет создавать естественные, комфортные и визуально приятные прокрутки, которые улучшают пользовательский опыт и делают интерфейс страницы более динамичным и современным.

Оглавление