这是什么CSS效果？

Question

我在网上遇到了粘性视频背景效果。

我正在尝试在我的网站上复制它。但是我发现在不知道效果叫什么的情况下很难开始。

如果你观看这个视频：https://share.viewedit.com/i1QaiuzeT3o8T9YEM7ppnR你会看到效果。

几个对我的任务有帮助的问题。

Q1。这种效果的名称是什么？ Q2。这可能只是 CSS?

Answer 1

这根本不是视差效果。背景图像静止，您只是上下移动前面板。

Answer 2

嗯，这是一个非常好的问题。对于视差类型，我很确定它只是称为 "sticky" 背景。至于这是怎么实现的，好像是这样的……

<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

我已经检查了您展示的示例中的代码，这确实是他们实现它的方式... 您希望视频放在所有内容末尾的原因是页面上的图像会在视频之前加载。

这是什么CSS效果？

What CSS effect is this?

html

javascript

css

parallax