CSS-классы состояний

Библиотека fullPage.js активно управляет DOM-структурой, добавляя и удаляя CSS-классы в зависимости от текущего состояния секций, слайдов и элементов навигации. Эти классы позволяют:

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

Классы состояний автоматически назначаются библиотекой, и их понимание критично для тонкой настройки поведения и стилей.

Классы активных секций и слайдов

.active

Назначается текущей активной секции (.section) и текущему активному слайду (.slide).

Особенности:

  • всегда присутствует только у одного элемента каждого уровня (одна секция и один слайд внутри неё)
  • используется для определения текущего положения пользователя
.section.active {
  opacity: 1;
  transform: scale(1);
}

.section {
  opacity: 0.5;
  transform: scale(0.95);
  transition: all 0.5s ease;
}

Классы предыдущих и следующих элементов

.fp-prev и .fp-next

Добавляются к секциям и слайдам, которые находятся соответственно перед и после активного элемента.

Применение:

  • создание направленных анимаций
  • визуальное различие между предыдущими и следующими блоками
.section.fp-prev {
  transform: translateY(-50px);
}

.section.fp-next {
  transform: translateY(50px);
}

Классы состояния загрузки

.fp-loaded

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

Практическое использование:

  • запуск анимаций только после загрузки
  • предотвращение “рывков” интерфейса
.section:not(.fp-loaded) {
  visibility: hidden;
}

.section.fp-loaded {
  visibility: visible;
}

Классы для анимации переходов

.fp-completely

Назначается элементу, когда он полностью вошёл в область видимости и завершил прокрутку.

Отличие от .active:

  • .active — назначается сразу при активации
  • .fp-completely — после завершения анимации перехода
.section.fp-completely h1 {
  animation: fadeIn 1s ease forwards;
}

Классы контейнера fullPage

.fp-enabled

Добавляется к body при инициализации fullPage.js.

Назначение:

  • отключение стандартного скролла браузера
  • применение глобальных стилей
body.fp-enabled {
  overflow: hidden;
}

.fp-viewing-SECTION-SLIDE

Динамический класс, добавляемый к body, отражающий текущую секцию и слайд.

Формат:

fp-viewing-{anchor}-{slideIndex}

Пример:

body.fp-viewing-home-0 {
  background-color: #000;
}

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

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

Классы навигации

.fp-nav

Контейнер точечной навигации.

.fp-nav ul li a.active

Активный пункт навигации.

.fp-nav ul li a.active span {
  background-color: red;
}

.fp-tooltip

Отображает всплывающие подсказки для навигации.

.fp-tooltip {
  font-size: 12px;
  color: #fff;
}

Классы слайдов

.fp-slides

Контейнер всех слайдов внутри секции.

.fp-slide

Отдельный слайд.

.fp-slidesContainer

Внутренний контейнер, который перемещается при горизонтальной прокрутке.

Классы для контроля прокрутки

.fp-scrollable

Добавляется к элементам с внутренней прокруткой (если используется scrollOverflow: true).

.fp-scrollable {
  overflow-y: auto;
}

Классы направления движения

.fp-moving

Добавляется к body во время прокрутки.

Назначение:

  • отключение взаимодействий во время анимации
  • применение временных эффектов
body.fp-moving {
  pointer-events: none;
}

Классы для горизонтального и вертикального состояния

.fp-responsive

Добавляется при включении адаптивного режима (например, при responsiveWidth).

body.fp-responsive .section {
  height: auto;
}

Классы состояния меню

Если используется синхронизация с меню (menu опция):

.active (в меню)

Назначается элементу меню, соответствующему активной секции.

#menu li.active a {
  color: red;
}

Работа с пользовательскими состояниями

Комбинирование встроенных классов позволяет создавать сложные состояния:

.section.active.fp-completely {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Влияние порядка классов и специфичности

Поскольку fullPage.js динамически управляет классами:

  • важно учитывать специфичность CSS
  • предпочтительно использовать вложенные селекторы
  • избегать !important, если возможно
body.fp-viewing-about-0 .section.active {
  color: white;
}

Практические паттерны использования

Анимация появления:

.section {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.section.active {
  opacity: 1;
}

Задержка для завершённого состояния:

.section.fp-completely .content {
  transform: translateY(0);
}

.section .content {
  transform: translateY(50px);
  transition: transform 0.5s ease;
}

Разные стили для направлений:

.section.fp-prev {
  opacity: 0.3;
}

.section.fp-next {
  opacity: 0.7;
}

Расширение через JavaScript

Хотя классы назначаются автоматически, возможно добавление собственных:

new fullpage('#fullpage', {
  afterLoad: function(origin, destination) {
    destination.item.classList.add('custom-loaded');
  }
});

Это позволяет комбинировать встроенные состояния с пользовательской логикой.

Взаимодействие с CSS-переменными

Использование классов состояний совместно с CSS-переменными:

body.fp-viewing-home-0 {
  --main-color: #ff0000;
}

body.fp-viewing-about-0 {
  --main-color: #0000ff;
}

.section {
  color: var(--main-color);
}

Особенности при адаптивной верстке

При переходе в responsive-режим:

  • часть классов перестаёт применяться
  • прокрутка может становиться нативной
  • .fp-enabled может удаляться

Это требует дополнительной проверки стилей:

body:not(.fp-responsive) .section {
  height: 100vh;
}

Ошибки и типичные проблемы

Отсутствие анимаций:

  • .fp-completely не используется
  • переходы завязаны только на .active

Конфликт стилей:

  • глобальные стили перекрывают состояния
  • неправильная специфичность

Непредсказуемое поведение:

  • ручное удаление классов
  • вмешательство сторонних библиотек

Структурирование CSS

Рекомендуемый подход:

  • базовые стили (.section, .slide)
  • состояния (.active, .fp-completely)
  • глобальные состояния (body.fp-viewing-*)
  • адаптивные стили (.fp-responsive)

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

/* База */
.section {}

/* Состояния */
.section.active {}
.section.fp-completely {}

/* Глобальные */
body.fp-viewing-home-0 {}

/* Адаптив */
body.fp-responsive .section {}

Итоговое понимание

CSS-классы состояний в fullPage.js формируют полноценную систему управления интерфейсом:

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

Глубокое понимание этих классов превращает fullPage.js из простой библиотеки прокрутки в мощный инструмент для создания интерактивных интерфейсов.

Оглавление