Easing-функции

Easing-функции управляют скоростью и плавностью анимации прокрутки между секциями и слайдами в fullPage.js. Они задают, как изменяется скорость анимации во времени: может быть равномерной, ускоряться, замедляться или сочетать эти эффекты. Правильный выбор easing-функции позволяет создавать естественные и комфортные визуальные переходы, улучшая UX.

Подключение и настройка

В fullPage.js easing-функция задается через параметр easing при инициализации плагина:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: true,
    easing: 'easeInOutCubic',
    easingcss3: 'ease-in-out'
});
  • easing — используется для JavaScript-анимации (если css3: false или браузер не поддерживает CSS3).
  • easingcss3 — используется для CSS3-анимации (css3: true), поддерживающей аппаратное ускорение.

Стандартные значения easing

FullPage.js использует набор стандартных easing-функций:

Функция Описание
linear Равномерная скорость, без ускорения и замедления.
easeInQuad Анимация начинается медленно и ускоряется к концу.
easeOutQuad Анимация начинается быстро и замедляется к концу.
easeInOutQuad Сочетание ускорения и замедления, плавный старт и остановка.
easeInCubic Медленное начало, ускорение к концу более заметное.
easeOutCubic Быстрый старт, плавная остановка.
easeInOutCubic Плавное ускорение и замедление с мягким переходом.
easeInQuart, easeOutQuart, easeInOutQuart Усиленное ускорение и замедление, более драматичная динамика.
easeInQuint, easeOutQuint, easeInOutQuint Экстремальная вариативность скорости для эффектных переходов.

Отличие easing в JavaScript и CSS3

  • JavaScript-анимация (easing) выполняется с помощью requestAnimationFrame и обеспечивает плавную прокрутку даже на старых браузерах.
  • CSS3-анимация (easingcss3) использует свойства transition-timing-function и позволяет аппаратное ускорение GPU, что повышает производительность и плавность на современных устройствах.

Рекомендуется использовать easingcss3 для большей производительности, если проект рассчитан на современные браузеры.

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

1. Плавная прокрутка с easeInOutCubic

new fullpage('#fullpage', {
    autoScrolling: true,
    easingcss3: 'ease-in-out',
    scrollingSpeed: 700
});

Прокрутка между секциями длится 700 мс, ускорение плавное в начале и замедление в конце.

2. Резкая прокрутка с linear

new fullpage('#fullpage', {
    autoScrolling: true,
    easingcss3: 'linear',
    scrollingSpeed: 500
});

Прямолинейное движение без ускорения, скорость постоянная на протяжении всей анимации.

3. Ускорение в начале с easeInQuad

new fullpage('#fullpage', {
    autoScrolling: true,
    easingcss3: 'ease-in',
    scrollingSpeed: 600
});

Анимация начинается медленно, затем ускоряется к середине.

Пользовательские easing-функции

FullPage.js позволяет подключать собственные функции easing через JavaScript, если требуется уникальная динамика:

function customEasing(t) {
    return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3)/2;
}

new fullpage('#fullpage', {
    autoScrolling: true,
    easing: customEasing,
    scrollingSpeed: 800
});
  • Параметр t — это прогресс анимации от 0 до 1.
  • Функция возвращает значение прогресса, изменённое согласно нужной кривой.

Влияние scrollingSpeed на easing

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

new fullpage('#fullpage', {
    autoScrolling: true,
    easingcss3: 'ease-in-out',
    scrollingSpeed: 1200 // длинная анимация, плавность ощущается лучше
});

Рекомендации по выбору easing

  • Лёгкие интерфейсы: easeInOutCubic, easeInOutQuad для естественных переходов.
  • Динамичные сайты: easeInQuint, easeOutQuint для более драматичных эффектов.
  • Простая функциональность: linear для минималистичных проектов, где важна скорость.
  • Сочетание с параллаксом и анимациями: выбираются более мягкие кривые (easeInOutCubic), чтобы движение не выглядело резким.

Заключение принципов работы

Easing-функции в fullPage.js — это инструмент контроля темпа и характера прокрутки, который напрямую влияет на восприятие интерфейса. Использование JavaScript или CSS3-анимации, настройка скорости и кривой перехода позволяют создавать как минималистичные, так и визуально эффектные сайты с высокой отзывчивостью и плавностью.

Оглавление