Rellax.js - параллакс-эффекты на основе vanilla JavaScript

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

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

Если вы хотите получить Rellax.js, то зайдите на страницу на GitHub. Весь исходный код библиотеки доступен бесплатно.

Использование Rellax.js заключается в вызове всего одной функцию JS, с указанием CSS-класса .rellax в качестве аргумента. Например:

var rellax = new Rellax('.rellax');

Обращаю внимание, что вы можете использовать любой CSS-класс, но в примерах для простоты восприятия используется класс .rellax.

Теперь осталось только «обернуть» ваши параллакс-элементы в div с классом .rellax и указать значение атрибута скорости. Им является пользовательский атрибут data-rellax-speed, который может иметь значения от -10 до +10.

Вот небольшой пример HTML-кода, который используется на демо-странице.

<div class="rellax" data-rellax-speed="-7">
  I'm extra slow and smooth
</div>

Вы также можете центрировать элементы на странице и настраивать позиционирование элементов с помощью CSS.

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

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

Демо-страница

Оригинал статьи: Rellax.js – Free Parallax Features Using Vanilla JavaScript

Перевод: Земсков Матвей