Установка фоновых изображений

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

Использование CSS для фоновых изображений

Каждая секция в fullPage.js представлена блоком <div> с классом section или пользовательским классом. Для задания фонового изображения применяется стандартное CSS-свойство background-image.

Пример базовой структуры HTML:

<div id="fullpage">
    <div class="section" id="section1"></div>
    <div class="section" id="section2"></div>
    <div class="section" id="section3"></div>
</div>

CSS для установки фонового изображения:

#section1 {
    background-image: url('images/bg1.jpg');
    background-size: cover;       /* Изображение масштабируется, чтобы покрыть всю секцию */
    background-position: center;  /* Центрирование изображения */
    background-repeat: no-repeat; /* Отмена повторения изображения */
}

#section2 {
    background-image: url('images/bg2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

  • background-size: cover; обеспечивает масштабирование изображения по всей секции без искажений.
  • background-position: center; фиксирует центр изображения в центре секции.
  • background-repeat: no-repeat; предотвращает повторение изображения при изменении размеров экрана.

Динамическая смена фона через JavaScript

FullPage.js позволяет работать с событиями секций, что даёт возможность динамически менять фон при скролле. Используется событие afterLoad, которое вызывается после загрузки каждой секции.

Пример:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        let section = destination.item;
        switch(destination.index){
            case 0:
                section.style.backgroundImage = "url('images/bg1.jpg')";
                break;
            case 1:
                section.style.backgroundImage = "url('images/bg2.jpg')";
                break;
            case 2:
                section.style.backgroundImage = "url('images/bg3.jpg')";
                break;
        }
    }
});

Пояснение:

  • destination.index — индекс текущей секции, начиная с 0.
  • destination.item — DOM-элемент секции, куда можно напрямую применять стили.
  • Такой подход полезен, если нужно анимированно менять фон при переходе между секциями или загружать его динамически из внешних источников.

Использование градиентов и нескольких слоёв

Для более сложного оформления можно комбинировать изображения с градиентами или несколькими фоновыми слоями:

#section1 {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('images/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

  • Возможность наложения полупрозрачных градиентов поверх изображения для улучшения читаемости текста.
  • Создание эффектов плавного затемнения или перехода между цветами.

Адаптивность фоновых изображений

Для корректного отображения на устройствах с разными разрешениями рекомендуется использовать медиа-запросы или современные свойства CSS, такие как background-attachment: fixed для создания параллакс-эффекта.

#section1 {
    background-image: url('images/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    #section1 {
        background-position: top;
    }
}

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

  • background-attachment: fixed; создаёт эффект параллакса, когда фон остаётся неподвижным при прокрутке.
  • Медиа-запросы позволяют корректно смещать фон на мобильных устройствах для оптимального отображения.

Оптимизация загрузки фоновых изображений

Большие изображения могут замедлять загрузку страницы. Важно использовать:

  • Сжатие изображений без потери качества (форматы WebP или оптимизированный JPEG/PNG).
  • Ленивая загрузка через IntersectionObserver или плагин fullPage.js lazyLoading для секций с фоновыми изображениями.

Пример ленивой загрузки через HTML-атрибут:

<div class="section" data-bg="images/bg1.jpg"></div>

JavaScript для подстановки фона при загрузке секции:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        let section = destination.item;
        if(section.dataset.bg){
            section.style.backgroundImage = `url('${section.dataset.bg}')`;
        }
    }
});

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

Совмещение с видео-фонами

Фоновые изображения можно комбинировать с видео для более динамичного эффекта. Используется HTML <video> с абсолютным позиционированием:

<div class="section" id="section1">
    <video autoplay muted loop id="bg-video">
        <source src="videos/bg.mp4" type="video/mp4">
    </video>
</div>

CSS:

#section1 {
    position: relative;
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

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

  • Видео остаётся фоном и не мешает основному контенту секции.
  • Можно комбинировать с градиентами и текстовыми блоками для визуальной глубины.

Эти методы позволяют создавать привлекательные секции с эффектными фонами, сочетая CSS и возможности fullPage.js, обеспечивая при этом адаптивность и оптимизацию загрузки.

Оглавление