Вертикальное выравнивание контента

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

1. Центрирование с помощью встроенных опций

FullPage.js предоставляет встроенную настройку для вертикального выравнивания через параметр verticalCentered. По умолчанию этот параметр включен, что позволяет автоматически центрировать весь контент внутри секции:

new fullpage('#fullpage', {
    verticalCentered: true, // Контент будет центрирован по вертикали
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
});

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

  • verticalCentered: true — контент каждой секции автоматически выравнивается по вертикали.
  • Подходит для любых блоков, включая текстовые, медиа и интерактивные элементы.
  • Если параметр установлен в false, элементы будут выравниваться по верхнему краю секции, что удобно для нестандартных макетов.

2. Вертикальное центрирование через CSS

Даже при включенном verticalCentered, иногда требуется дополнительная точная настройка через CSS. FullPage.js оборачивает контент каждой секции в элемент .fp-tableCell, который использует display: table-cell для центрирования. Этот элемент можно переопределять или дополнять стилями:

.fp-tableCell {
    display: table-cell;
    vertical-align: middle; /* центрирование по вертикали */
    text-align: center;     /* горизонтальное центрирование */
}

Для более гибкой настройки можно использовать Flexbox:

.section {
    display: flex;
    flex-direction: column;
    justify-content: center; /* вертикальное центрирование */
    align-items: center;     /* горизонтальное центрирование */
    height: 100%;
}

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

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

3. Частичное вертикальное выравнивание и смещения

Иногда нужно смещать контент относительно центра или использовать асимметричное выравнивание. Для этого применяется комбинация CSS свойств margin, padding и Flexbox:

.section-content {
    margin-top: 20%; /* смещение вниз на 20% от высоты секции */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

Также можно использовать абсолютное позиционирование:

.section-content {
    position: absolute;
    top: 30%; /* смещение относительно верхнего края */
    left: 50%;
    transform: translateX(-50%);
}

Особенности подхода с absolute:

  • Позволяет точно контролировать позицию контента.
  • Требует, чтобы родительская секция имела position: relative.
  • Используется для уникальных макетов, где требуется точное позиционирование элементов.

4. Центрирование динамического контента

Для контента, высота которого может меняться динамически (например, изображения с задержкой загрузки или блоки с текстом из API), важно обновлять выравнивание после изменения размера. FullPage.js предоставляет метод reBuild() для повторного расчета размеров и центрирования:

fullpage_api.reBuild();

Использование reBuild() особенно важно при:

  • Добавлении нового контента через JavaScript.
  • Изменении шрифта или динамическом контенте, влияющем на высоту блока.
  • Анимациях или интерактивных элементах, меняющих высоту секции.

5. Совмещение с горизонтальными слайдами

Если секция содержит горизонтальные слайды (slides), вертикальное выравнивание контента сохраняется независимо от слайдов. Важно учитывать:

  • Контент каждого слайда также должен быть обернут в .fp-tableCell или иметь собственное CSS-центрирование.
  • Можно использовать отдельные классы для слайдов, чтобы задавать разные вертикальные отступы.
.fp-slides .slide-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

6. Адаптивное вертикальное выравнивание

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

@media screen and (max-width: 768px) {
    .section-content {
        justify-content: flex-start; /* сдвиг контента вверх */
        padding-top: 50px;
    }
}

Плюсы адаптивного подхода:

  • Контент не «тонет» на маленьких экранах.
  • Сохраняется эстетика и читаемость.
  • Позволяет комбинировать автоматическое и ручное выравнивание для разных разрешений.

7. Использование JS для кастомного центрирования

При сложной логике вертикального выравнивания, например, при анимациях, можно вычислять смещение через Jav * aScript:

function centerContent(section) {
    const content = section.querySelector('.section-content');
    const sectionHeight = section.offsetHeight;
    const contentHeight = content.offsetHeight;
    const offset = (sectionHeight - contentHeight) / 2;
    content.style.marginTop = offset + 'px';
}

// Применение после загрузки и при изменении размеров
window.addEventListener('load', () => centerContent(document.querySelector('.section')));
window.addEventListener('resize', () => centerContent(document.querySelector('.section')));

Такой подход позволяет динамически управлять вертикальной позицией контента без зависимости от verticalCentered и CSS-флексбокса.

Вертикальное выравнивание в fullPage.js сочетает автоматические возможности библиотеки с гибкими средствами CSS и JavaScript, обеспечивая полное управление положением контента на экране. Такой подход позволяет создавать гармоничные, визуально привлекательные и адаптивные полноэкранные интерфейсы.

Оглавление