Как создать эффект параллакса на сайте с помощью Rellax.js

Что такое эффект параллакса?

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

Почему Rellax.js?

• Простота — настройка за пару строк кода.

• Лёгкость — всего 3KB (минифицированная версия).

• Производительность — использует CSS-анимации вместо JavaScript-таймеров.

• Адаптивность — корректно работает на мобильных устройствах.

• Совместимость — поддерживает современные браузеры.

Как подключить Rellax.js и создать параллакс?

1. Подключение библиотеки

Есть два способа:

Вариант 1: CDN (быстрый способ)

<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>

Вариант 2: Установка через npm (для сборщиков)

npm install rellax

Или через yarn:

yarn add rellax

2. HTML-разметка

Добавляем элементы, которые будут двигаться с параллакс-эффектом.

<div class="rellax" data-rellax-speed="1">  
    Этот блок будет двигаться медленно  
</div>  

<div class="rellax" data-rellax-speed="-2">  
    Этот блок будет двигаться быстрее (отрицательное значение)  
</div>  

<div class="rellax" data-rellax-speed="3" data-rellax-zindex="5">  
    Этот блок будет двигаться ещё быстрее и поверх других  
</div>  

data-rellax-speed — скорость движения (чем больше число, тем сильнее эффект).
data-rellax-zindex — управляет слоями (z-index).

3. Инициализация Rellax.js

// Простая инициализация  
var rellax = new Rellax('.rellax');  

// С дополнительными настройками  
var rellax = new Rellax('.rellax', {  
    speed: -2,       // Скорость по умолчанию  
    center: true,    // Центрирование элемента  
    wrapper: null,   // Ограничивающий контейнер  
    round: true,     // Сглаживание анимации  
    vertical: true,  // Вертикальный параллакс  
    horizontal: false // Горизонтальный параллакс (по желанию)  
});  

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

Отключение на мобильных устройствах

if (window.innerWidth > 768) {  
    var rellax = new Rellax('.rellax');  
}  

Параллакс для фоновых изображений

<div class="parallax-bg rellax" data-rellax-speed="-3"></div>  

.parallax-bg {  
    background-image: url('bg.jpg');  
    background-size: cover;  
    background-position: center;  
    height: 100vh;  
    width: 100%;  
}  

Кастомные easing-эффекты

Можно добавить через CSS:

.rellax {  
    transition: transform 0.2s ease-out;  
}  

Оптимизация и советы

Используйте will-change для плавности анимации

.rellax {  
    will-change: transform;  
}  

• Сжимайте фоновые изображения (чтобы не тормозил сайт).

• Тестируйте на мобильных — иногда лучше отключать параллакс на маленьких экранах.

• Не перегружайте страницу — слишком много параллакс-элементов могут снизить производительность.

Вывод

Rellax.js — отличный выбор для быстрого и красивого параллакс-эффекта. Он прост в настройке, работает плавно и не нагружает страницу.

Попробуйте сами и добавьте динамики вашему сайту!

Альтернативы:

• AOS (Animate On Scroll) — анимации при скролле

• ScrollMagic — для сложных сценариев

• Чистый CSS-параллакс (transform: translate3d())

Если вам нужен простой и эффективный параллакс — Rellax.js идеально подойдёт!