這是什麼CSS效果？

Question

我在網上遇到過粘滯的視頻背景效果。

我試圖複製這一在我的網站。但是我發現如果不知道效果是什麼，就很難開始。

如果你觀看這部影片：https://share.viewedit.com/i1QaiuzeT3o8T9YEM7ppnR你就會看到效果。

一些問題，這將有助於我與我的任務。

Q1。這種效果的名稱是什麼？ Q2。這可能只是與CSS？

Answer 1

嗯，這是一個非常好的問題。 對於視差類型，我很確定它只是被稱爲「粘性」背景。 至於如何實現這一點，似乎是這樣的......

<div class="video-bg-spacer"> 
//An empty div with a transparent background the will serve as a "view window" for the video 
</div> 
//At the bottom of you code... 
<div class="video-container"> 
    <video class="background-video" autoplay="autoplay" loop="loop" muted="muted"> 
     <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/> 
     <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/> 
    </video> 
</div> 

背景視頻將CSS是這樣的：

.background-video { 
    height: 100%; 
    margin: 0 auto; 
    position: fixed; 
    z-index: -100;//underneat everything 
    background-attachment: fixed; 
    top: 0; 
    left: 0; 
} 
.video-bg-spacer { 
    background: transparent; 
    height: 100vh; 
} 

下面是一個例子。

https://codepen.io/jacob_124/pen/QvRLXG?editors=0100

我從你表現出例如檢查代碼，這確實是他們如何完成它...... 原因你希望你在一切的結束視頻是爲了讓你的網頁上的圖像在視頻之前加載。

Answer 2

這不是一個視差效果都沒有。背景圖像仍然存在，您只需將前面板上下移動即可。