Параллакс-эффект для фонов

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

Основные принципы работы

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

  1. Через CSS-трансформации и позиционирование фона
  2. С помощью JavaScript и событий fullPage.js

При использовании fullPage.js необходимо учитывать, что каждая секция (section) или слайд (slide) — это отдельный контейнер, на котором можно применять индивидуальные стили и анимации.

Подготовка HTML и CSS

Каждая секция должна иметь уникальный класс или идентификатор, чтобы можно было задавать разные фоновые изображения и эффекты. Пример структуры секции:

<div id="fullpage">
    <div class="section section1" data-bg-speed="0.3"></div>
    <div class="section section2" data-bg-speed="0.5"></div>
    <div class="section section3" data-bg-speed="0.7"></div>
</div>

Ключевой момент — атрибут data-bg-speed, который определяет скорость движения фона относительно прокрутки. Значение меньше 1 делает фон медленнее, больше 1 — быстрее.

CSS для базового оформления секций:

.section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.section1 {
    background-image: url('img/bg1.jpg');
}

.section2 {
    background-image: url('img/bg2.jpg');
}

.section3 {
    background-image: url('img/bg3.jpg');
}

Реализация параллакса через JavaScript

FullPage.js предоставляет события onLeave и afterLoad, которые позволяют отслеживать скролл между секциями. Для параллакса удобно использовать событие onLeave, так как оно срабатывает при начале перехода между секциями.

Пример кода с использованием vanilla JS и fullPage.js:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollHorizontally: false,
    onLeave: function(origin, destination, direction){
        const sections = document.querySelectorAll('.section');
        sections.forEach(section => {
            const speed = parseFloat(section.dataset.bgSpeed) || 0.5;
            const offset = window.scrollY * speed;
            section.style.backgroundPosition = `center ${-offset}px`;
        });
    }
});

Пояснения:

  • dataset.bgSpeed — скорость движения фонового слоя.
  • window.scrollY — текущее значение вертикального скролла страницы.
  • backgroundPosition обновляется динамически, создавая ощущение движения.

Оптимизация производительности

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

  • Использовать will-change: transform в CSS для секций, где применяется параллакс.
  • Применять requestAnimationFrame вместо прямого изменения стиля в событии скролла, чтобы избежать “тормозов”.
  • Сжимать фоновые изображения и использовать форматы WebP или оптимизированные JPG/PNG.

Пример оптимизированного JavaScript с requestAnimationFrame:

let ticking = false;

window.addEventListener('scroll', function() {
    if (!ticking) {
        window.requestAnimationFrame(function() {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                const speed = parseFloat(section.dataset.bgSpeed) || 0.5;
                const offset = window.scrollY * speed;
                section.style.backgroundPosition = `center ${-offset}px`;
            });
            ticking = false;
        });
        ticking = true;
    }
});

Дополнительные возможности

FullPage.js позволяет сочетать параллакс с другими эффектами:

  • Слои с фиксированной позицией (position: fixed) для переднего плана, создавая мультислойный эффект.
  • Анимации с CSS-переходами при смене секции через afterLoad, чтобы фон плавно менял положение.
  • Горизонтальные слайды с разными скоростями фона для эффекта движения в сторону.

Примеры многослойного параллакса

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

<div class="section">
    <div class="parallax-layer layer-back" data-bg-speed="0.2"></div>
    <div class="parallax-layer layer-middle" data-bg-speed="0.5"></div>
    <div class="parallax-layer layer-front" data-bg-speed="1.0"></div>
</div>

CSS:

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    top: 0;
    left: 0;
}
.layer-back { background-image: url('bg-back.jpg'); z-index: 1; }
.layer-middle { background-image: url('bg-middle.png'); z-index: 2; }
.layer-front { background-image: url('bg-front.png'); z-index: 3; }

JavaScript будет аналогично вычислять смещение для каждого слоя с учетом data-bg-speed.

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

Оглавление