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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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