Переопределение стилей

Библиотека fullPage.js активно использует собственные CSS-классы и inline-стили для управления разметкой, позиционированием и анимациями. Переопределение этих стилей требует понимания структуры DOM, специфичности CSS и особенностей, связанных с JavaScript-управлением прокруткой.

Основные классы, формируемые библиотекой:

  • .fp-section — основной контейнер секции
  • .fp-slide — слайды внутри секции
  • .fp-table и .fp-tableCell — используются для вертикального центрирования
  • .fp-scrollable — контейнеры с внутренней прокруткой
  • .fp-controlArrow, .fp-prev, .fp-next — стрелки навигации
  • .fp-slidesNav, .fp-nav — навигационные элементы

Все эти классы могут быть переопределены через пользовательские стили.

Специфичность и порядок подключения

Ключевой момент — правильный порядок подключения файлов:

<link rel="stylesheet" href="fullpage.min.css">
<link rel="stylesheet" href="custom.css">

Файл с пользовательскими стилями должен подключаться после стандартного CSS библиотеки.

Если стандартные стили имеют высокую специфичность, используются следующие подходы:

  • Увеличение специфичности селектора:
body .fp-section {
    background-color: #111;
}
  • Использование !important (крайний случай):
.fp-section {
    padding: 50px !important;
}

Переопределение структуры секций

По умолчанию секции занимают 100% высоты окна:

.fp-section {
    height: 100vh;
}

Изменение поведения:

.fp-section {
    height: auto;
    min-height: 100vh;
}

При отключении фиксированной высоты важно учитывать настройку:

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

Настройка отступов и размеров

Стандартные секции не имеют внутренних отступов:

.fp-section {
    padding: 0;
}

Добавление внутреннего пространства:

.fp-section {
    padding: 60px 40px;
    box-sizing: border-box;
}

Слайды внутри секций:

.fp-slide {
    padding: 20px;
}

Переопределение вертикального центрирования

fullPage.js использует таблицы (display: table) для центрирования:

.fp-table {
    display: table;
}

.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
}

Отключение этого поведения:

new fullpage('#fullpage', {
    verticalCentered: false
});

И замена на flexbox:

.fp-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

Кастомизация навигации (dots)

Стандартная навигация:

#fp-nav ul li a span {
    background: #333;
}

Изменение внешнего вида:

#fp-nav ul li a span {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
}

#fp-nav ul li a.active span {
    background: #fff;
}

Позиционирование:

#fp-nav {
    right: 20px;
}

Кастомизация стрелок слайдов

Стандартные стрелки — это CSS-треугольники:

.fp-controlArrow.fp-prev {
    border-color: transparent #fff transparent transparent;
}

Замена на собственные элементы:

.fp-controlArrow {
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,0.5);
    border: none;
}

.fp-controlArrow::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
    margin: auto;
}

Работа с фоном

Секции часто используются как полноэкранные блоки с фоном:

.fp-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Пример:

.section-1 {
    background-image: url('bg1.jpg');
}

Параллакс-эффект (упрощённый):

.fp-section {
    background-attachment: fixed;
}

Переопределение анимаций переходов

По умолчанию fullPage.js использует CSS-трансформации:

.fp-section {
    transition: all 0.7s ease;
}

Изменение скорости:

.fp-section {
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

Важно учитывать, что часть анимаций управляется JavaScript, поэтому чрезмерное вмешательство может нарушить логику прокрутки.

Кастомизация скролла внутри секций

При использовании scrollOverflow: true:

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

Изменение внешнего вида полосы прокрутки:

.fp-scrollable::-webkit-scrollbar {
    width: 6px;
}

.fp-scrollable::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

Работа с активными состояниями

fullPage.js добавляет классы:

  • .active — текущая секция или слайд
  • .fp-completely — полностью отображённая секция

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

.fp-section.active {
    opacity: 1;
}

.fp-section {
    opacity: 0.5;
    transition: opacity 0.5s;
}

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

.fp-section .content {
    transform: translateY(50px);
    opacity: 0;
}

.fp-section.active .content {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.6s ease;
}

Переопределение z-index и слоёв

Некоторые элементы fullPage.js используют фиксированные значения z-index:

#fp-nav {
    z-index: 100;
}

Если элементы перекрываются:

.custom-header {
    position: fixed;
    z-index: 200;
}

Адаптивные стили

fullPage.js часто используется с отключением авто-скролла на мобильных устройствах:

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

Дополнительные стили:

@media (max-width: 768px) {
    .fp-section {
        padding: 20px;
    }

    #fp-nav {
        display: none;
    }
}

Переопределение inline-стилей

Библиотека часто добавляет inline-стили через Jav * aScript:

<div class="fp-section" style="height: 100vh;"></div>

Переопределение возможно через:

.fp-section {
    height: auto !important;
}

Либо через конфигурацию:

new fullpage('#fullpage', {
    fitToSection: false
});

Интеграция с CSS-переменными

Для гибкости удобно использовать CSS-переменные:

:root {
    --section-bg: #111;
    --accent-color: #ffcc00;
}

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

#fp-nav ul li a.active span {
    background: var(--accent-color);
}

Частые проблемы и решения

1. Стили не применяются

Причины:

  • недостаточная специфичность
  • порядок подключения CSS

Решение:

  • усилить селектор
  • проверить порядок файлов

2. Ломается прокрутка

Причины:

  • изменение position, overflow, transform

Решение:

  • не трогать критические свойства .fp-section и .fp-wrapper

3. Некорректная высота секций

Причины:

  • вмешательство в height
  • конфликт с flexbox

Решение:

  • использовать настройки fullPage.js вместо CSS

4. Проблемы с адаптивностью

Причины:

  • фиксированные размеры
  • отключённый responsive режим

Решение:

  • использовать responsiveWidth и media queries

Глубокое переопределение стилей требует аккуратного баланса между кастомизацией и сохранением логики работы библиотеки. Чем меньше вмешательство в базовые механизмы (позиционирование, трансформации, overflow), тем стабильнее поведение интерфейса.

Оглавление