Barba.js для переходов между страницами

Для начала необходимо подключить Barba.js к проекту. Библиотека распространяется через npm и CDN. Рекомендуется использовать npm для современных проектов:

npm install @barba/core

После установки можно импортировать библиотеку в Jav * aScript:

import barba from '@barba/core';

Для работы с переходами между страницами достаточно одного файла barba.js. Если используется CDN, подключение происходит через стандартный тег <script>:

<script src="https://unpkg.com/@barba/core"></script>

Barba.js работает на основе контейнеров (barba-container) и областей (barba-wrapper), которые содержат основной контент страницы. Структура HTML должна учитывать это:

<div id="barba-wrapper">
  <div class="barba-container">
    <!-- Основной контент страницы -->
  </div>
</div>

Инициализация Barba.js

Базовая инициализация выполняется с помощью функции barba.init:

barba.init({
  transitions: [
    {
      name: 'fade',
      leave(data) {
        return gsap.to(data.current.container, {
          opacity: 0,
          duration: 0.5
        });
      },
      enter(data) {
        return gsap.from(data.next.container, {
          opacity: 0,
          duration: 0.5
        });
      }
    }
  ]
});

Ключевые моменты:

  • name – уникальное имя перехода.
  • leave – вызывается при уходе с текущей страницы.
  • enter – вызывается при загрузке следующей страницы.
  • data.current.container – DOM текущего контейнера.
  • data.next.container – DOM следующего контейнера.

Для анимаций удобно использовать библиотеки вроде GSAP, однако Barba.js не требует их обязательного использования.

Структура переходов и хуки

Barba.js предоставляет хуки для расширенного контроля жизненного цикла переходов:

  • before – выполняется перед началом перехода.
  • beforeLeave – перед уходом со страницы.
  • leave – анимация выхода.
  • afterLeave – после ухода со страницы.
  • beforeEnter – перед загрузкой нового контейнера.
  • enter – анимация входа.
  • afterEnter – после загрузки нового контейнера.
  • after – после завершения всего перехода.

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

barba.hooks.before(() => {
  console.log('Начало перехода');
});

barba.hooks.after(() => {
  console.log('Переход завершен');
});

Хуки позволяют запускать функции, такие как повторная инициализация скриптов, lazy-load изображений или инициализация скролла.

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

Barba.js поддерживает namespace — уникальные идентификаторы страниц. Это позволяет задавать разные анимации для разных страниц.

<div class="barba-container" data-barba-namespace="home">
  <!-- Контент главной страницы -->
</div>
barba.init({
  views: [
    {
      namespace: 'home',
      beforeEnter() {
        console.log('Инициализация главной страницы');
      }
    },
    {
      namespace: 'about',
      beforeEnter() {
        console.log('Инициализация страницы "О нас"');
      }
    }
  ]
});

Использование namespace особенно важно для проектов с различными интерактивными блоками на каждой странице.

Асинхронная загрузка контента

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

barba.init({
  transitions: [
    {
      async leave(data) {
        await gsap.to(data.current.container, { opacity: 0 });
      },
      async enter(data) {
        await gsap.from(data.next.container, { opacity: 0 });
      }
    }
  ]
});

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

Интеграция с анимациями

Barba.js отлично сочетается с GSAP и другими библиотеками анимаций. Основная схема: анимации выхода применяются к старому контейнеру, а входные — к новому. Можно использовать сложные цепочки анимаций с timeline:

leave(data) {
  const tl = gsap.timeline();
  tl.to(data.current.container, { opacity: 0, y: -50, duration: 0.5 });
  tl.to('.loader', { opacity: 1, duration: 0.3 }, '-=0.3');
  return tl;
},
enter(data) {
  const tl = gsap.timeline();
  tl.from(data.next.container, { opacity: 0, y: 50, duration: 0.5 });
  tl.to('.loader', { opacity: 0, duration: 0.3 }, '-=0.3');
  return tl;
}

Работа с повторной инициализацией скриптов

При переходах с помощью Barba.js скрипты внутри контейнера старой страницы уничтожаются, а новые не всегда запускаются автоматически. Для исправления этого используются хуки beforeEnter и afterEnter:

barba.hooks.afterEnter(() => {
  initSlider();
  initAnimations();
});

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

Ленивая загрузка и оптимизация

Barba.js ускоряет взаимодействие за счет того, что перезагружается только контейнер, а не вся страница. Для оптимизации можно:

  • Загружать тяжелые ресурсы по мере необходимости.
  • Использовать prefetch для заранее загрузки следующих страниц.
  • Повторно использовать глобальные элементы (например, хедер и футер), которые не требуют анимации.

Работа с внутренними ссылками

По умолчанию Barba.js перехватывает клики на все ссылки внутри контейнера. Для исключения внешних ссылок или якорей используется prevent:

barba.init({
  prevent: ({ href }) => href.startsWith('http') || href.includes('#')
});

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

Комбинация с Locomotive Scroll

При интеграции с Locomotive Scroll важно:

  • После перехода обновлять скролл:
barba.hooks.afterEnter(() => {
  scroll.update();
});
  • Обновлять анимации, завязанные на скролл, после загрузки нового контейнера.
  • Поддерживать фиксированные элементы отдельно от Barba.js контейнера, чтобы избежать конфликтов при смене страниц.

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

Оглавление