带有视频背景的纯 CSS 视差效果

Posted 2023-03-05

【中文标题】带有视频背景的纯 CSS 视差效果

【英文标题】：Pure CSS parallax effect with video background

【发布时间】：2014-12-30 16:03:15

【问题描述】：

我正在尝试使用在第一帧上也有视频背景的纯 CSS 来创建视差效果。该效果在 Firefox 和 IE9+ 中运行良好，但 Chrome 对所有带有“背景附件：已修复”的帧都有撕裂效果。

在使用奇怪的 html 布局和 CSS 剪辑之前，我确实设法在这里找到了答案，但我似乎再也找不到了。该代码的问题是我无法将框架设置为最小高度并允许内容在较小的视口上轻松重排。

这里有很多类似的问题，但似乎都没有真正得到回答，或者他们引用了一个似乎现在已修复的旧错误。如果我删除视频，则 background-attachment 属性会按预期运行。也许这些问题是相关的？

示例：http://codepen.io/cluke009/pen/cdHJu

HTML

<div id="slide0" class="slide"></div>
<div id="slide1" class="slide"></div>
<div id="slide2" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide3" class="slide">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>....
</div>
<div id="slide4" class="slide"></div>
<div id="slide5" class="slide"></div>

CSS

body,
html 
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

p
    margin: 0;
    padding: 10px 5%;

video 
    z-index: -9999;
    position: fixed;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;

.slide 
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    background-size: cover;
    box-shadow: inset 0 10px 10px rgba(0,0,0,.3);


.slide:nth-child(even) 
    background-attachment: fixed;

#slide1
  background-image:url(http://www.placekitten.com/1000/900);

#slide2
  background-image:url(http://www.placekitten.com/600/400);

#slide3
  background-image:url(http://www.placekitten.com/1000/1000);

#slide4
  background-image:url(http://www.placekitten.com/1000/800);

【问题讨论】：

“撕裂效果”是什么意思？

我们需要知道你的撕裂效果是什么意思。如果你的意思是滚动像小台阶而不是软的，这是由于程序本身的实现。您可以编写一个脚本来检测滚动，阻止滚动，然后轻松地对其进行动画处理。

Chrome 上唯一突出的是视频实际上变得像素化，这就是您所说的“撕裂”吗？

刚刚在 windows 的 chrome 上测试了这个，所以它可能是一个只有 mac 的问题，我在家里所以现在不能测试这个。他们也可能已经修复了这个错误，但我记得最近在工作中看到它。基本上会发生什么是你得到卡住的像素或帧滞后类型的效果，你可以通过背景图像看到孔。自从我最初的帖子以来，我已经放弃了这种特殊的用法，因为我能够提出一个合理的折衷方案。如果我有时间从我的项目中提取相关代码，我会更新它。

【参考方案1】：

我认为撕裂效果意味着从带有小猫和文字的框架到下一个孤独的影子的奇怪间隙。

您的问题可能重复Chrome issue with background-attachment fixed and position fixed elements