Parallax

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

Подключение и базовая настройка

Для начала необходимо подключить библиотеку fullPage.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.1.4/fullpage.min.js"></script>

Создаём структуру HTML:

<div id="fullpage">
    <div class="section" data-anchor="section1">
        <div class="parallax-layer" data-speed="0.3">Фон</div>
        <div class="content">Содержимое секции 1</div>
    </div>
    <div class="section" data-anchor="section2">
        <div class="parallax-layer" data-speed="0.5">Фон</div>
        <div class="content">Содержимое секции 2</div>
    </div>
</div>

Каждая секция содержит слой с классом parallax-layer, который будет двигаться с заданной скоростью data-speed.

Инициализация fullPage.js с включением параллакса

Параллакс в fullPage.js настраивается через опцию scrollBar и события скролла. Пример инициализации с кастомным эффектом:

new fullpage('#fullpage', {
    autoScrolling: true,
    scrollBar: true,
    onLeave: function(origin, destination, direction){
        let currentSection = origin.item;
        let nextSection = destination.item;

        const layers = currentSection.querySelectorAll('.parallax-layer');
        layers.forEach(layer => {
            let speed = layer.dataset.speed;
            layer.style.transform = `translateY(${direction === 'down' ? -100 * speed : 100 * speed}px)`;
        });
    },
    afterLoad: function(origin, destination, direction){
        const layers = destination.item.querySelectorAll('.parallax-layer');
        layers.forEach(layer => {
            layer.style.transition = 'transform 0.7s ease-out';
            layer.style.transform = 'translateY(0)';
        });
    }
});
  • onLeave — срабатывает при уходе с текущей секции, позволяет задавать смещение для параллакс-слоев.
  • afterLoad — активируется после загрузки секции, возвращает слои в исходное положение плавно.

CSS для плавного эффекта

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
}

.section .content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 50px;
    color: #fff;
}
  • z-index важно правильно расставить, чтобы слои с контентом были выше слоёв параллакса.
  • Фоновый слой (parallax-layer) может быть изображением или градиентом.

Анимация нескольких слоёв с разной скоростью

Для сложных эффектов параллакса создаются несколько слоёв с разными data-speed:

<div class="section">
    <div class="parallax-layer" data-speed="0.2">Дальний фон</div>
    <div class="parallax-layer" data-speed="0.5">Средний фон</div>
    <div class="parallax-layer" data-speed="0.8">Передний план</div>
    <div class="content">Главный контент</div>
</div>

Чем меньше значение data-speed, тем медленнее движется слой. Эффект глубины достигается именно разницей скоростей движения слоёв.

Динамическая прокрутка и параллакс

FullPage.js позволяет сочетать параллакс с динамической прокруткой с помощью scrollBar или scrollOverflow. Для плавного взаимодействия слоёв с мышью можно использовать событие scroll:

document.querySelector('#fullpage').addEventListener('scroll', function(e){
    const sections = document.querySelectorAll('.section');
    sections.forEach(section => {
        const layers = section.querySelectorAll('.parallax-layer');
        layers.forEach(layer => {
            let speed = parseFloat(layer.dataset.speed);
            let offset = window.scrollY * speed;
            layer.style.transform = `translateY(${offset}px)`;
        });
    });
});

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

Советы по оптимизации

  • Для больших изображений использовать background-size: cover; и lazy-loading, чтобы не тормозила прокрутка.
  • Минимизировать количество слоёв, если параллакс сложный, чтобы не было просадок FPS.
  • Для мобильных устройств можно уменьшать эффект параллакса или отключать его, так как аппаратная поддержка GPU может быть ограничена.
  • Сочетание transform: translate3d(0, y, 0) вместо обычного translateY ускоряет рендер за счёт аппаратного ускорения.

Взаимодействие с другими эффектами fullPage.js

Параллакс можно совмещать с:

  • Скролл-секциями горизонтально (scrollHorizontally).
  • Анимациями контента через afterLoad и onLeave.
  • Видео и интерактивными элементами, которые движутся с разной скоростью относительно слоя.

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

Оглавление