Несомненно этот эффект параллакса придает элегантный вид веб-странице, где на самом деле довольно просто добиться эффекта параллакса с небольшим количеством CSS. Параллакс будет создавать элемент фиксированной позиции для каждого изображения параллакса в начале тела документа. Этот зеркальный элемент будет находиться позади других элементов и будет соответствовать положению и размерам целевого объекта.
CSS Involved
Где background-attachment: fixed CSS свойство является главным героем эффекта. Это свойство устанавливает, является ли фоновое изображение фиксированным в окне просмотра браузера или прокруткой внутри элемента контейнера.
Изображение изначально создается через свойство background-image. Поскольку элемент по существу пуст, вам необходимо задать ему определенную высоту.
Код
<div id="prokrutki-parallaksa"></div>
CSS
Код
#prokrutki-parallaksa {
background-image: url("http://zornet.ru/ABVUN/Aba/robot.jpg");
height: 817px;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
Добавление эффекта параллакса на ваш сайт - это всего лишь вопрос назначения разных скоростей движения для слоев.
Демонстрация
