По умолчанию для его использования требуется только простой вызов функции для назначения класса параллакса элементам страницы. Затем, в процессе прокрутки страницы, эти элементы фиксируются и начинают двигаться вместе с областью видимости браузера пользователя.
Вы можете настроить эти элементы так, чтобы они отображались ближе, дальше или позади всех элементов страницы. Это создает иллюзию глубины на странице, а работает на основе одной простой библиотеки JavaScript.
Если вы хотите получить Rellax.js, то зайдите на страницу на GitHub. Весь исходный код библиотеки доступен бесплатно.
Использование Rellax.js заключается в вызове всего одной функцию JS, с указанием CSS-класса .rellax в качестве аргумента. Например:
JavaScript
Обращаю внимание, что вы можете использовать любой CSS-класс, но в примерах для простоты восприятия используется класс .rellax.
Теперь осталось только «обернуть» ваши параллакс-элементы в div с классом .rellax и указать значение атрибута скорости. Им является пользовательский атрибут data-rellax-speed, который может иметь значения от -10 до +10.
Вот небольшой пример HTML-кода, который используется на демо-странице.
HTML
Вы также можете центрировать элементы на странице и настраивать позиционирование элементов с помощью CSS.
У Rellax.js нет определенных требований к структуре страницы и стилям CSS, которые нужно использовать на ней. Все, что делает библиотека - это создает естественный параллакс-эффект прокрутки с использованием чистого JavaScript. Как вы будете использовать возможности этого инструмента полностью зависит от вас.
Чтобы посмотреть демо-страницу, ознакомьтесь с официальный сайтом или загляните в репозиторий на GitHub. На нем есть необходимая документация, а также ссылки на реальные сайты, использующие Rellax.js. И что самое приятное, команда разработчиков библиотеки постоянно принимает обратную связь, поэтому, если вы заметите какие-либо проблемы или у вас есть предложения по улучшению функционала, просто сообщите им об этом.
Демо-страница
Оригинал статьи: Rellax.js – Free Parallax Features Using Vanilla JavaScript
Перевод: Земсков Матвей