Сегодня мы бы хотели рассказать о процессе создания современного эффекта параллакса для сайта при помощи CSS3 и jQuery. Мы постараемся максимально упростить процесс создания для легкости его внедрения в структуру сайта. Параллакс будет поддерживать отображение на мобильных устройствах, кроме этого будет адаптивным, для его создания мы подготовили подборку изображений. Также были добавлены подписи на изображения верхним слоем, для отображения дополнительной информации, они также будут сопровождены данным эффектом.

 

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

Шаг 1. HTML

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

Затем добавьте фоновое изображение в контейнер, используя data-image-srcатрибут:

Вы можете добавить несколько контейнеров, используя данный атрибут, единственное для нового блока нужно присвоить новый атрибут, например id=»parallax-1″ а следующий будет id=»parallax-2″.

Как создать современный эффект параллакса

Шаг 2. CSS

У нас будет всего немного правил CSS для изображений параллакса:

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

Шаг 3. JS

Теперь осталось самое важное, нам необходимо оживить соотношение изображений к блокам, для начала нам необходимо заполнить изображения из dataатрибутов:

Теперь надо проверить, находиться ли элемент в области просмотра:

Нам осталось прикрепить событие прокрутки к окну. Рассчитайте коэффициент прокрутки каждого элемента и измените положение изображения с этим соотношением:

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

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