Rellax.js — бесплатные функции параллакса с использованием Vanilla JavaScript
Прокрутка параллакса выглядит невероятно, если все сделано правильно. Это не та функция, которая вам нужна на каждом веб-сайте, но для креативных сайтов и целевых страниц элементы параллакса быстро привлекают внимание.
Существует множество бесплатных библиотек JavaScript для анимированных эффектов прокрутки, но многие из них раздуты или слишком сложны для некоторых людей.
Вот почему я рекомендую Rellax.js для ваших потребностей параллакса. Это бесплатный плагин с открытым исходным кодом, построенный на ванильном JavaScript, поэтому у него нет никаких зависимостей.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
По умолчанию требуется только простой вызов функции для назначения класса параллакса элементам страницы. Затем при прокрутке эти элементы остаются фиксированными и перемещаются вместе с точкой зрения пользователя.
Вы можете настроить эти элементы так, чтобы они отображались ближе, дальше или позади элементов страницы. Это создает иллюзию глубины на странице, и все это работает через одну простую библиотеку 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
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)