Как сделать в Css эффект паралакса с видеофоном и картинкой?

Для создания эффекта параллакса с видеофоном и картинкой в CSS вам понадобятся несколько шагов:

1. Создайте разметку HTML, которая будет содержать элементы для видеофона, картинки и контента. Например:

<div class="parallax">
  <div class="video-overlay">
    <!-- Ваше видео для видеофона -->
  </div>
  <div class="image-layer">
    <!-- Ваша картинка -->
  </div>
  <div class="content">
    <!-- Ваш контент -->
  </div>
</div>

2. Определите стили CSS для вашей разметки. В данном случае нам понадобятся три основных уровня: .parallax, .video-overlay и .image-layer. Пример стилей может выглядеть следующим образом:

.parallax {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}

.image-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(path/to/your/image.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* Дополнительные стили для вашего контента */
}

3. Для создания эффекта параллакса настройте движение элементов на основе движения мыши или прокрутки страницы. Для этого можно использовать JavaScript или CSS код.

3.1. Для создания эффекта параллакса с движением мыши, используйте следующий CSS код:

.parallax .image-layer {
  transition: transform 0.2s ease-out;
}

.parallax:hover .image-layer {
  transform: translateX(-10px) translateY(-10px);
}

.parallax:hover .content {
  transform: translateX(10px) translateY(10px);
}

3.2. Для создания эффекта параллакса с прокруткой страницы, используйте следующий CSS код:

.parallax .image-layer {
  transition: transform 0.5s ease-out;
}

.window-scroll {
  transform: translateY(-50%);
}

.body-scroll .parallax .image-layer {
  transform: translateY(100%);
}

function scrollHandler() {
  const scrollPos = window.scrollY;
  if (scrollPos > 0) {
    document.body.classList.add('body-scroll');
  } else {
    document.body.classList.remove('body-scroll');
  }
}

window.addEventListener('scroll', scrollHandler);

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