这是什么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

这不是一个视差效果都没有。背景图像仍然存在，您只需将前面板上下移动即可。