Адаптация под дизайн-систему

Интеграция fullPage.js в существующую дизайн-систему требует согласования поведения скроллинга, визуальной иерархии и токенов интерфейса (цвета, отступы, типографика, анимации). Основная задача — сделать полноэкранную прокрутку частью общей системы, а не изолированным компонентом.

Ключевые аспекты:

  • согласование размерных шкал (spacing, grid)
  • унификация цветов и фонов секций
  • соблюдение типографических правил
  • стандартизация анимаций и переходов
  • адаптация под темизацию (themes)
  • поддержка доступности (a11y)

Структурное соответствие layout-системе

fullPage.js строит интерфейс на основе секций (.section) и слайдов (.slide). В дизайн-системе эти сущности должны быть приведены к единому layout-подходу.

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

<div id="fullpage">
  <section class="section layout-section">
    <div class="container">
      <h1 class="heading-xl">Заголовок</h1>
      <p class="text-body">Контент</p>
    </div>
  </section>

  <section class="section layout-section theme-dark">
    <div class="container">
      <h2 class="heading-lg">Вторая секция</h2>
    </div>
  </section>
</div>

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

  • .section не должна напрямую содержать контент — используется промежуточный .container
  • контейнеры синхронизируются с системой сеток (например, 12-column grid)
  • запрещено использовать «жёсткие» размеры вне токенов дизайн-системы

Использование дизайн-токенов

Все визуальные параметры должны быть привязаны к переменным дизайн-системы.

CSS-переменные

:root {
  --color-bg-light: #ffffff;
  --color-bg-dark: #0f172a;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
  --transition-base: 300ms ease;
}

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

.section {
  padding: var(--spacing-xl);
  background-color: var(--color-bg-light);
  transition: background-color var(--transition-base);
}

.section.theme-dark {
  background-color: var(--color-bg-dark);
}

Синхронизация с fullPage.js

new fullpage('#fullpage', {
  scrollingSpeed: 700, // синхронизировать с motion tokens
});

Типографика и вертикальный ритм

Полноэкранные секции часто нарушают вертикальный ритм, если не учитывать правила дизайн-системы.

Основные принципы

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

Пример

.heading-xl {
  font-size: 48px;
  line-height: 1.2;
}

.text-body {
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
}

Анимации и motion-дизайн

fullPage.js предоставляет встроенные переходы между секциями, но они должны соответствовать motion-системе.

Настройки

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

Синхронизация с дизайн-системой

  • скорость анимаций = глобальный токен (motion-duration-base)
  • кривые ускорения = единый набор easing-функций
  • избегать избыточных эффектов (parallax, zoom) вне системы

Кастомные анимации

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

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

Темизация (Light / Dark / Brand themes)

fullPage.js активно работает с классами (active, fp-viewing-*), что удобно для переключения тем.

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

new fullpage('#fullpage', {
  onLeave: function(origin, destination) {
    document.body.setAttribute('data-theme', destination.item.dataset.theme);
  }
});

HTML

<section class="section" data-theme="dark"></section>
<section class="section" data-theme="light"></section>

CSS

body[data-theme="dark"] {
  --color-bg: #000;
  --color-text: #fff;
}

body[data-theme="light"] {
  --color-bg: #fff;
  --color-text: #000;
}

Компонентный подход

Каждая секция должна рассматриваться как независимый компонент дизайн-системы.

Пример: Hero-секция

<section class="section hero">
  <div class="container hero__content">
    <h1 class="hero__title">Продукт</h1>
    <button class="btn btn-primary">Начать</button>
  </div>
</section>

Изоляция стилей

.hero {
  display: flex;
  align-items: center;
  min-height: 100%;
}

Навигация и UI-контролы

fullPage.js генерирует навигацию (#fp-nav), которую необходимо привести к стандартам дизайн-системы.

Кастомизация

#fp-nav ul li a span {
  background: var(--color-primary);
  width: 8px;
  height: 8px;
}

#fp-nav ul li a.active span {
  transform: scale(1.5);
}

Соответствие системе

  • размеры элементов → scale tokens
  • цвета → semantic tokens
  • hover/active состояния → единый interaction pattern

Адаптивность и responsive-поведение

По умолчанию fullPage.js плохо сочетается с мобильными паттернами, поэтому требуется адаптация.

Breakpoints

new fullpage('#fullpage', {
  responsiveWidth: 768,
  autoScrolling: true
});

Поведение на мобильных

  • отключение fullPage при малых экранах
  • переход к обычному scroll
  • сохранение визуальной структуры
afterResponsive: function(isResponsive) {
  if (isResponsive) {
    console.log('Обычный скролл');
  }
}

Доступность (Accessibility)

Полноэкранный скроллинг может нарушать доступность, если не учитывать правила.

Основные требования

  • поддержка клавиатуры
  • корректный focus management
  • aria-атрибуты

Пример

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

Улучшение доступности

<section class="section" aria-label="Раздел 1"></section>

Интеграция с дизайн-системой состояний

Состояния компонентов (hover, active, disabled) должны совпадать с глобальными правилами.

Пример

.btn {
  transition: background var(--transition-base);
}

.btn:hover {
  background: var(--color-primary-hover);
}

Взаимодействие с fullPage.js

onLeave: function(origin, destination) {
  document.body.classList.remove('section-' + origin.index);
  document.body.classList.add('section-' + destination.index);
}

Управление контентом и плотностью интерфейса

Полноэкранный формат требует строгого контроля плотности информации.

Ограничения

  • одна ключевая идея на секцию
  • не более 2–3 визуальных акцентов
  • избегание перегруженных layout

Подход

  • использование whitespace как элемента дизайна
  • соблюдение сетки и ритма
  • выравнивание по baseline grid

Интеграция с UI-библиотеками

При использовании UI-фреймворков (React, Vue) важно сохранять соответствие дизайн-системе.

Пример (React)

import ReactFullpage from '@fullpage/react-fullpage';

<ReactFullpage
  scrollingSpeed={600}
  render={() => (
    <ReactFullpage.Wrapper>
      <div className="section">
        <Component />
      </div>
    </ReactFullpage.Wrapper>
  )}
/>

Важно

  • компоненты не должны ломать layout fullPage
  • стилизация происходит через дизайн-токены
  • избегать inline-стилей

Контроль качества интеграции

Проверка соответствия дизайн-системе включает:

  • визуальное сравнение с макетами
  • проверку токенов (цвета, spacing)
  • consistency анимаций
  • тестирование на разных устройствах
  • аудит доступности

Чек-лист

  • все секции используют единый container
  • нет «жёстких» значений (px вне токенов)
  • анимации синхронизированы
  • темы переключаются корректно
  • навигация соответствует UI-киту
Оглавление