Question

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

我试图在我的网站上复制这个。但我发现很难在不知道所谓的效果的情况下开始。

如果您观看此视频：https://share.viewedit.com/i1QaiuzeT3o8T9YEM7ppnR，您会看到效果。

很少有问题可以帮助我完成任务。

Q1。这个效果的名称是什么？ Q2。这只能用CSS吗？

Answer 1

这根本不是视差效应。背景图像仍然是，您只是上下移动前面板。

Answer 2

嗯，这是一个非常好的问题。对于视差类型，我很确定它只是被称为“粘性”背景。至于如何实现这一点，似乎是这样的......

<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效果？

2 个答案: