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

Для создания параллакс эффекта с помощью CSS, необходимо использовать свойство background-attachment: fixed; в сочетании с другими CSS свойствами.

Вот пример кода, который демонстрирует создание параллакс эффекта:

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

.parallax-content {
  position: relative;
  top: 50vh; /* Вы можете изменить это значение для настройки эффекта */
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
}

Сначала создается класс .parallax, который задает изображение фона, его фиксацию при прокрутке (background-attachment: fixed;), положение изображения по центру экрана, запрет повторения изображения и масштабирование изображения для заполнения всего экрана.

Затем создается класс .parallax-content, который позиционирует контент по вертикали для создания визуального эффекта параллакса.

Чтобы использовать эти классы в HTML, просто добавьте соответствующие классы к нужным элементам:

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

<div class="parallax-content">
  <h1>Заголовок</h1>
  <p>Текст</p>
</div>

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