Думаю каждый из вас любит параллакс, и сегодня я покажу как создать достаточно простой и красивый фон с эффектом параллакса для вашего сайта при помощи небольшого плагина jQuery. Рarlx является чрезвычайно легким плагином jQuery который используется для создания эффектов прокрутки параллакса, изменяя положение фона с помощью CSS3 2D преобразований (translateY). С помощью его сегодня мы и создадим наш эффект, для демонстрации мы взяли три слайда, которые будут двигаться более медленно, чем основная статья, создавая иллюзию.

 

Много бесплатных лендингов и не только вы можете найти на сайте наших партнеров, а также все шаблоны локализованы и с поддержкой.

Шаг 1. HTML

Включите, для начала, последнюю версию библиотеки jQuery и библиотеку плагина jQuery parlx в нижней части вашей веб-страницы:

Затем просто добавьте фоновое изображение в контейнер parallax:

С разметкой, у вас, думаю не должно возникнуть вопросов, по это смело двигаемся дальше.

Шаг 2. CSS

Большую часть работы будет выполнять плагин который мы ранее подключили к странице, осталось немного его стилизовать указав позиции и относительность его на странице:

Шаг 3. JS

Активируйте эффект прокрутки параллакса, вызвав функцию в контейнере параллакса при загрузке/изменении размера/прокрутке окна:

Настройка скорости анимации по умолчанию:

Установка пользовательской высоты:

Включение или отключение прокрутки параллакса на мобильных устройствах:

Установите направление прокрутки параллакса:

Установите эффект параллакса на фоновое изображение или div:

Можно также указать параметры для каждого содержимого parallax с помощью атрибутов данных:

Благодаря такому небольшому плагину, вы получаете множество функций для тонкой настройки параллакса, который обязательно стоит попробовать.

Вот и все. Готово!