Анимации переходов

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

Ключевым параметром, определяющим характер перехода, является скорость анимации:

new fullpage('#fullpage', {
    scrollingSpeed: 700
});

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

Типы эффектов прокрутки

Стандартная трансформация

По умолчанию fullPage.js использует translate3d, что позволяет добиться плавных переходов без лагов:

transform: translate3d(0px, -100%, 0px);

Такой подход минимизирует перерисовку и активно использует GPU.

CSS3 vs JavaScript-анимация

Параметр css3 управляет способом анимации:

new fullpage('#fullpage', {
    css3: true
});
  • true — применяется CSS3 (transform, transition)
  • false — используется JavaScript (jQuery animate)

CSS3-режим предпочтителен, так как обеспечивает:

  • лучшую производительность
  • меньшую нагрузку на CPU
  • более плавные переходы

Настройка easing-функций

Характер движения задаётся функциями сглаживания (easing):

new fullpage('#fullpage', {
    easing: 'easeInOutCubic',
    easingcss3: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
});

Разделение:

  • easing — для JavaScript-анимации
  • easingcss3 — для CSS3

Примеры популярных функций:

  • ease — плавное ускорение и замедление
  • linear — равномерное движение
  • ease-in — ускорение в начале
  • ease-out — замедление в конце

Кастомные кривые cubic-bezier позволяют создавать уникальные ощущения движения.

Эффекты параллакса

Параллакс создаёт иллюзию глубины за счёт разной скорости движения элементов. В fullPage.js реализуется через расширения или кастомную логику.

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

.section {
    background-attachment: fixed;
}

Или через Jav * aScript:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        const bg = destination.item.querySelector('.parallax-bg');
        bg.style.transform = 'translateY(50px)';
    }
});

Параллакс усиливает визуальное восприятие и делает переходы более динамичными.

Fade-эффекты

Плавное появление/исчезновение секций вместо сдвига:

new fullpage('#fullpage', {
    fadingEffect: true
});

Этот режим отключает вертикальную трансформацию и заменяет её на изменение прозрачности (opacity). Подходит для:

  • презентационных сайтов
  • лендингов с акцентом на контент

Горизонтальные слайды и их анимации

Внутри секций могут находиться горизонтальные слайды:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
</div>

Анимация переключения задаётся аналогично вертикальной:

new fullpage('#fullpage', {
    scrollingSpeed: 600
});

Дополнительно:

  • используется translateX
  • можно комбинировать с вертикальной прокруткой

Управление переходами через события

fullPage.js предоставляет события для контроля анимаций:

onLeave

Срабатывает перед переходом:

onLeave: function(origin, destination, direction){
    console.log('Переход с', origin.index, 'на', destination.index);
}

afterLoad

Срабатывает после завершения:

afterLoad: function(origin, destination){
    console.log('Секция загружена:', destination.index);
}

Эти события позволяют:

  • запускать кастомные анимации
  • синхронизировать элементы интерфейса
  • управлять состояниями

Добавление пользовательских анимаций

Анимации можно комбинировать с CSS или сторонними библиотеками:

Пример с CSS-анимацией

.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.fade-in.active {
    opacity: 1;
}
afterLoad: function(origin, destination){
    destination.item.querySelector('.fade-in').classList.add('active');
}

Пример с Animate.css

afterLoad: function(origin, destination){
    const el = destination.item.querySelector('.box');
    el.classList.add('animate__animated', 'animate__fadeInUp');
}

Эффект continuous scrolling

Непрерывная прокрутка создаёт ощущение «бесконечного» движения:

new fullpage('#fullpage', {
    continuousVertical: true
});

При достижении последней секции переход происходит к первой без резкого обрыва.

Переключение с использованием scrollOverflow

Если контент внутри секции превышает высоту экрана:

new fullpage('#fullpage', {
    scrollOverflow: true
});

В этом случае:

  • внутренняя прокрутка не мешает глобальным переходам
  • анимация между секциями сохраняется

Эффекты масштабирования

Имитация zoom-анимации:

onLeave: function(origin, destination){
    origin.item.style.transform = 'scale(0.8)';
    destination.item.style.transform = 'scale(1)';
}

Используется вместе с CSS:

.section {
    transition: transform 0.7s ease;
}

Блокировка анимаций

Возможность отключения анимации при необходимости:

new fullpage('#fullpage', {
    scrollingSpeed: 0
});

Или динамически:

fullpage_api.setScrollingSpeed(0);

Полезно при:

  • быстрых переходах
  • тестировании
  • синхронизации с другими эффектами

Производительность и оптимизация

Для плавных переходов важно учитывать:

  • минимизацию DOM-изменений во время анимации
  • использование transform вместо top/left
  • избегание тяжёлых теней и фильтров
  • ограничение количества одновременно анимируемых элементов

Рекомендации:

  • использовать will-change: transform;
  • избегать position: fixed внутри секций
  • оптимизировать изображения

Комбинирование эффектов

Возможны сложные сценарии:

  • вертикальный сдвиг + fade
  • параллакс + масштабирование
  • CSS-анимации + события fullPage.js

Пример:

new fullpage('#fullpage', {
    scrollingSpeed: 800,
    onLeave: function(origin, destination){
        origin.item.classList.add('fade-out');
        destination.item.classList.add('fade-in');
    }
});

Расширения и плагины

fullPage.js поддерживает дополнительные эффекты через расширения:

  • parallax
  • cards
  • waterEffect
  • dropEffect

Подключение:

new fullpage('#fullpage', {
    parallax: true,
    parallaxOptions: {
        type: 'reveal',
        percentage: 62
    }
});

Расширения значительно расширяют визуальные возможности без ручной реализации сложной логики.

Управление состоянием анимации

API позволяет контролировать переходы:

fullpage_api.moveTo(2);
fullpage_api.moveSectionDown();
fullpage_api.moveSectionUp();

Это даёт возможность:

  • запускать переходы по клику
  • синхронизировать с меню
  • строить сложные сценарии навигации

Работа с задержками

Иногда требуется отложить анимацию:

onLeave: function(origin, destination){
    setTimeout(() => {
        destination.item.classList.add('animate');
    }, 300);
}

Задержки помогают:

  • создать драматургию интерфейса
  • выстроить последовательность появления элементов

Управление анимацией через CSS-классы

fullPage.js автоматически добавляет классы:

  • active — текущая секция
  • fp-completely — полностью загружена

Пример:

.section .content {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.section.active .content {
    opacity: 1;
    transform: translateY(0);
}

Это один из самых удобных способов анимации без JS.

Синхронизация с навигацией

Переходы могут быть связаны с меню:

new fullpage('#fullpage', {
    menu: '#menu'
});

При смене секции:

  • активный пункт меню обновляется
  • анимации можно привязать к состоянию меню

Ограничения и особенности

  • сложные анимации могут вызывать лаги на слабых устройствах
  • мобильные браузеры иногда ограничивают CSS-эффекты
  • чрезмерное количество эффектов ухудшает UX

Оптимальный подход — баланс между визуальной выразительностью и производительностью.

Оглавление