Как сделать параллакс эффект css

Для создания параллакс эффекта с помощью CSS необходимо использовать свойства background-attachment и background-position.

1. Задайте фоновое изображение для блока, расположите его с помощью свойства background-position.

.parallax {
  background-image: url('your-image.jpg');
  background-position: center center;
}

2. Задайте значение background-attachment равным fixed.

.parallax {
  background-image: url('your-image.jpg');
  background-position: center center;
  background-attachment: fixed;
}

3. Добавьте секцию с контентом и соответствующим отступом сверху.

<section class="parallax"></section>
<section class="content">
  <h2>Ваш контент здесь</h2>
</section>

.content {
  padding-top: 500px;
}

4. Добавьте стили для секции с контентом.

.content {
  padding-top: 500px;
  height: 1000px;
  background-color: #fff;
  text-align: center;
}

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

Можно дополнительно использовать другие свойства, такие как background-size, чтобы изменить размер фонового изображения, или opacity, чтобы изменить его прозрачность и создать дополнительный эффект.