В данном уроке мы бы снова хотели поговорить о эффекте параллакса и как его применить с видеофоном, такой эффект будет реализован с помощью плагина ArParallax. Идея заключается в плавной смене объектов фона  красивой анимацией и эффектом параллакса, кроме этого зона до активации будет заблюрена, по этому не будет отвлекать посетителя. Видео будет зациклено, когда пользователь будет прокручивать скролл, эффект плавно подлетает к активному полю страницы с превосходной анимацией, смотрится очень привлекательно для посетителя.

 

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

ArParallax.js представляет собой мощный плагин jQuery, который применяет настраиваемый эффект параллакса (с размытостью и преобразованием эффектов) для изображений и видео при прокрутке вниз или вверх по веб-странице. Данный плагин основан на CSS3 3D-преобразовании и фильтре размытия.

Шаг 1. HTML

Сначала нам необходимо создать разметку страницы, для этого мы добавляем собственные изображения и видео в HTML5 контейнеры с параллаксом следующим образом:

Мы заранее подготовили видео, и загрузили его к исходникам, по умолчанию нам нам понадобиться видео в формате *.mp4, такие видео весьма удобны, тем, что везде кодируются и не занимают много места. Теперь давайте двигаться далее.

Шаг 2. CSS

Устанавливаем следующие стили CSS, они нам необходимы для  правильного отображения содержимого эффекта параллакса.

Cтили достаточно простые, думаю у Вас не должно возникнуть трудностей с ними, по этому давайте перейдем к следующему шагу.

Шаг 3. JS

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

Вы можете настроить эффект прокрутки параллакса, изменив параметры, которые отвечают за функции объекта arparallax ():

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

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