Видео параллакс в качестве заголовка - PullRequest
Новая
       27

Видео параллакс в качестве заголовка

0 голосов
/ 20 апреля 2020

Я больше на заднем плане, и я впервые делаю видео в качестве параллакса. Я пробовал параллакс раньше, но только на изображениях. Теперь мне было трудно это сделать. я пробовал несколько способов, но то же самое, оно не вступит в силу

вот мой html 

  <header class="v-header container">
        <div class="fullscreen-video-wrap">
            <video class="video-wrapper" autoplay muted loop type="video/mp4">
                <source src="./assets/images/typecode.mp4" type="video/mp4">
            </video>
        </div>
        <div class="header-overlay"></div>
        <div class="container-fluid" id="jumbo-message">
            <div class="typing-animation">
                <h1 id="typedtext"></h1>
            </div>
        </div>
    </header>
    <div class="page-scroll">

    </div>

и мой css

 .container{
 max-width:960px;
 padding-left:1rem;
 padding-right:1rem;
 margin:auto;
 text-align:center;
 }

 .fullscreen-video-wrap{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  }

 .fullscreen-video-wrap video{
  min-height:100%;
  min-width:100%;
  }

 .header-overlay{
  height:100vh;
  position: absolute;
  top:0;
  left:0;
  width:100vw;
  z-index:1;
  background: #225470;
  opacity:0.75;
  }
...