Rellax.js – бесплатные функции параллакса с использованием Vanilla JavaScript

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

Существует множество бесплатных библиотек JavaScript для анимированных эффектов прокрутки, но многие из них раздуты или слишком сложны для некоторых людей.

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

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

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

Читайте также: Как реализовать эффект бесконечной прокрутки страниц в статических веб-страницах [Tutorial]

Весь исходный код Rellax доступен бесплатно на GitHub если вы хотите скачать копию.

Вся установка использует одну функцию JS, нацеленную на класс .rellax, например:

var rellax = new Rellax (‘. rellax’);

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

Отсюда вы просто оборачиваете свои элементы параллакса внутри div с помощью класса .rellax и устанавливаете атрибут скорости. Это работает через пользовательский атрибут data-rellax-speed, который принимает значения от -10 до +10.

Вот пример фрагмента из HTML-кода на демонстрационной странице:

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

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

И, что самое приятное, команда постоянно готова принимать запросы по запросу, поэтому, если вы заметили какие-либо проблемы или у вас есть предложения по функциям, просто отправить быстрое сообщение к команде.

Читайте также: прокрутка параллакса стала проще с StickyStack.js