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

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

HTML

<div class="parallax"></div>

CSS

.parallax {
  background-image: url('your-image.jpg');
  min-height: 100vh; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Объяснение

background-image: устанавливаем ссылку на выбранное фоновое изображение.

min-height: 100vh занимаем элементом параллакса всю высоту области просмотра.

background-attachment: fixed: это основная фишка, которая позволяет оставлять фон неподвижным при скроллинге остального контента.

background-position, background-repeat, and background-size: определяем правильное положение фонового изображение и покрытие им всей области просмотра.

Спасибо за внимание.