Создание сложных переходов

Механизм переходов в fullPage.js построен вокруг управления прокруткой и трансформациями контейнеров секций. Каждая секция (section) и слайд (slide) перемещаются либо с помощью CSS-трансформаций (translate3d), либо через стандартную прокрутку браузера (в режиме scrollBar: true). Основной контроль осуществляется через внутренний движок, который отслеживает текущую активную секцию, направление движения и состояние анимации.

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

  • scrollingSpeed — скорость анимации (в миллисекундах)
  • easing и easingcss3 — функции сглаживания
  • css3 — использование CSS3-трансформаций
  • autoScrolling — автоматическое управление прокруткой
  • fitToSection — принудительное выравнивание секции по экрану

Пример базовой конфигурации:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollingSpeed: 1000,
    easing: 'easeInOutCubic',
    css3: true
});

Кастомизация easing-функций

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

Через CSS:

.fp-section {
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

Через JavaScript (если отключён css3):

new fullpage('#fullpage', {
    css3: false,
    easing: 'easeInOutExpo'
});

Подключение сторонних библиотек, таких как jQuery Easing, расширяет набор доступных функций.

Управление переходами через callbacks

fullPage.js предоставляет систему событий (callbacks), позволяющую вмешиваться в процесс перехода:

  • onLeave — перед уходом с секции
  • afterLoad — после загрузки секции
  • afterRender — после инициализации
  • afterSlideLoad — при загрузке слайда

Пример сложной логики:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction) {
        if (direction === 'down') {
            origin.item.classList.add('fade-out');
        }
    },
    afterLoad: function(origin, destination) {
        destination.item.classList.add('fade-in');
    }
});

Комбинирование CSS-анимаций с переходами

Для создания визуально сложных эффектов используется сочетание встроенных переходов fullPage.js и CSS-анимаций.

Пример:

.fade-in {
    animation: fadeIn 1s forwards;
}

.fade-out {
    animation: fadeOut 0.5s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

Важно учитывать синхронизацию: длительность CSS-анимаций должна совпадать или согласовываться с scrollingSpeed.

Параллакс-эффекты

Для создания глубины интерфейса применяется параллакс — смещение элементов с разной скоростью.

Реализация через опцию parallax (в расширенной версии):

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

Альтернативный подход — ручная реализация:

onLeave: function(origin, destination, direction) {
    const elements = destination.item.querySelectorAll('.parallax');
    elements.forEach(el => {
        el.style.transform = `translateY(${destination.index * 50}px)`;
    });
}

Анимация отдельных элементов внутри секций

Сложные переходы часто требуют независимой анимации элементов внутри секций.

Подход через data-атрибуты:

<div class="section">
    <h1 data-animate="fadeInUp">Заголовок</h1>
</div>

Jav * aScript:

afterLoad: function(origin, destination) {
    const animated = destination.item.querySelectorAll('[data-animate]');
    animated.forEach(el => {
        const animation = el.dataset.animate;
        el.classList.add(animation);
    });
}

Использование GSAP для продвинутых переходов

Для более сложных сценариев применяется библиотека GSAP.

Пример интеграции:

onLeave: function(origin, destination, direction) {
    const tl = gsap.timeline();

    tl.to(origin.item, {
        opacity: 0,
        y: -100,
        duration: 0.5
    });

    tl.fromTo(destination.item,
        { opacity: 0, y: 100 },
        { opacity: 1, y: 0, duration: 0.5 }
    );
}

Преимущества:

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

Горизонтальные переходы и комбинированные сценарии

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

Пример структуры:

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

Настройка:

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

Добавление анимации:

afterSlideLoad: function(section, origin, destination) {
    destination.item.classList.add('slide-active');
}

Создание эффектов “разделения экрана”

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

CSS:

.split {
    display: flex;
}

.split .left,
.split .right {
    width: 50%;
    transition: transform 0.8s ease;
}

.split.animate .left {
    transform: translateX(-100%);
}

.split.animate .right {
    transform: translateX(100%);
}

JS:

afterLoad: function(origin, destination) {
    const split = destination.item.querySelector('.split');
    if (split) {
        split.classList.add('animate');
    }
}

Управление задержками и последовательностями

Для сложных переходов важно управлять задержками появления элементов.

Пример:

afterLoad: function(origin, destination) {
    const items = destination.item.querySelectorAll('.item');

    items.forEach((el, index) => {
        setTimeout(() => {
            el.classList.add('visible');
        }, index * 200);
    });
}

Работа с производительностью

Сложные переходы могут сильно нагружать систему. Основные рекомендации:

  • использовать transform и opacity вместо top/left
  • избегать перерисовки layout (reflow)
  • минимизировать количество одновременно анимируемых элементов
  • включать will-change для оптимизации:
.animated {
    will-change: transform, opacity;
}

Отключение и замена стандартного поведения

Для полной кастомизации иногда отключают стандартную прокрутку:

new fullpage('#fullpage', {
    autoScrolling: false,
    scrollBar: true
});

После этого реализуется собственная логика переходов, используя события прокрутки:

window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;

    document.querySelectorAll('.section').forEach((section, index) => {
        section.style.transform = `translateY(${scrollY * 0.2 * index}px)`;
    });
});

Интеграция с WebGL и Canvas

Для максимально сложных переходов используются WebGL (например, через Three.js).

Пример концепции:

  • при onLeave запускается shader-анимация
  • после завершения — переключение секции
onLeave: function(origin, destination, direction) {
    startWebGLTransition(() => {
        fullpage_api.moveTo(destination.index + 1);
    });

    return false; // блокировка стандартного перехода
}

Контроль состояния и предотвращение конфликтов

При сложных сценариях важно управлять состояниями:

let isAnimating = false;

new fullpage('#fullpage', {
    onLeave: function(origin, destination) {
        if (isAnimating) return false;

        isAnimating = true;

        setTimeout(() => {
            isAnimating = false;
        }, 1000);
    }
});

Это предотвращает наложение анимаций при быстром скролле.

Комбинирование нескольких техник

Сложные переходы строятся на сочетании:

  • CSS-анимаций
  • JS callbacks
  • сторонних библиотек (GSAP)
  • параллакса
  • задержек
  • трансформаций

Пример комплексного подхода:

onLeave: function(origin, destination) {
    const tl = gsap.timeline();

    tl.to(origin.item, { scale: 0.8, opacity: 0, duration: 0.5 })
      .fromTo(destination.item,
        { scale: 1.2, opacity: 0 },
        { scale: 1, opacity: 1, duration: 0.5 }
      );
}

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

Оглавление