CSS в библиотеке fullPage.js построен вокруг концепции полноэкранных секций, которые занимают 100% высоты окна браузера. Основная задача стилей — обеспечить корректное позиционирование, плавную прокрутку и управление отображением элементов при переходах между секциями.
Ключевая особенность — строгая иерархия классов и зависимость визуального поведения от состояния DOM-элементов, задаваемого JavaScript-логикой библиотеки.
.fp-wrapperГлавный контейнер, в который оборачивается весь контент fullPage. Отвечает за глобальные трансформации при прокрутке.
Основные свойства:
position: relativetransform) при
переходахtransition).fp-sectionКаждая секция страницы. Представляет собой отдельный экран.
Характеристики:
height: 100vhposition: relativedisplay: table или flex
для вертикального центрированияДополнительные состояния:
.active — текущая видимая секция.fp-completely — секция полностью отображена (после
завершения анимации).fp-slideГоризонтальные слайды внутри секции.
Особенности:
.fp-sectionfloat или flex в зависимости от
версии.fp-slidesКонтейнер для всех горизонтальных слайдов внутри секции.
Свойства:
position: relativewidth вычисляется динамически (например, 300% для трёх
слайдов).fp-slidesContainer.fp-slidesContainerНепосредственный контейнер, который перемещается при горизонтальной прокрутке.
Основные стили:
display: flextransition для анимацииtransform: translate3d(...)Вместо изменения top или left, fullPage.js
применяет:
transform: translate3d(0, -100%, 0) для вертикальных
переходовtransform: translate3d(-100%, 0, 0) для
горизонтальныхПреимущества:
CSS активно использует классы, которые динамически добавляются:
.fp-viewing-SECTION-SLIDE — текущая позиция.fp-responsive — адаптивный режим.fp-enabled — активирован fullPageЭто позволяет:
.fp-table и
.fp-tableCellКлассический подход:
.fp-table — контейнер с
display: table.fp-tableCell — ячейка с
display: table-cell; vertical-align: middleАльтернатива (в новых проектах):
использование flexbox:
display: flexalign-items: centerjustify-content: center.fp-navВертикальное меню навигации (точки справа).
Содержит:
<ul><li> с ссылкамиОсновные стили:
position: fixedz-index выше контентаАктивный элемент:
.active внутри <li>.fp-tooltipПодсказки при наведении на навигацию.
Особенности:
opacity: 0).fp-overflowИспользуется для секций с прокручиваемым содержимым.
Свойства:
overflow-y: autoПозволяет:
.fp-fixedКласс для элементов, которые остаются на месте при прокрутке.
Реализация:
position: fixed.fp-wrapperПримеры:
При включении адаптивного режима добавляется класс:
.fp-responsiveИзменения:
height: auto)CSS должен учитывать этот режим:
.fp-responsive .fp-section {
height: auto;
}Параметры анимации задаются через CSS:
transition: all 0.7s easeПоддерживаются:
fullPage.js предполагает активное кастомизирование:
Рекомендуемый подход:
Иерархия слоёв:
.fp-nav) — высокий z-indexВажно избегать конфликтов:
CSS fullPage.js минималистичен, но чувствителен к:
box-sizingРекомендации:
CSS влияет на производительность:
transform и opacitytop/leftДополнительно:
will-change: transformСтруктура CSS позволяет:
Пример:
.section.dark {
background: #000;
color: #fff;
}Конфликты с height
100vhСкролл внутри секций
.fp-overflowFixed элементы
.fp-wrapperПерекрытие элементов
z-indexОбобщённая иерархия:
body
└── .fp-enabled
└── #fullpage
└── .fp-wrapper
├── .fp-section
│ └── .fp-slides
│ └── .fp-slidesContainer
│ └── .fp-slide
└── ...Каждый уровень имеет собственную ответственность:
.fp-wrapper — движение.fp-section — экран.fp-slide — горизонтальная навигацияТакой подход обеспечивает гибкость и позволяет адаптировать библиотеку под практически любые дизайнерские и UX-задачи.