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

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

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

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

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

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

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

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

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

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

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

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

Я очень медленный и гладкий

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *