Mar*_*all 10 html css parallax
我一直在关注Keith Clark的 CSS Parallax指南.他的概念是这样的:
HTML:
<div class="container”>
<div class="parallax-child”></div>
</div>
CSS:
.container {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
perspective: 1px;
perspective-origin: 0 0;
}
.parallax-child {
transform-origin: 0 0;
transform: translateZ(-2px) scale(3);
}
这在大多数情况下都是完美的,例如在我的开发网站上.但是我需要将这个效果添加到另一个我根本无法控制HTML结构的网站,下面是基本结构树,添加注释到我可以编辑的地方.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer">
<p>Content in here scrolls slower than everything else</p>
</div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
我可以添加我想要的任何样式,除了注释中所述之外,不能编辑HTML结构.
我的问题是我似乎无法使视差效果起作用,如果我将container视差效果的示例样式(在这篇文章的顶部)放在body视差效果上...
根据我的阅读,我需要将transform-style: preserve-3d;样式添加到container孩子和孩子之间的元素上,但这似乎不起作用.
谁知道出了什么问题？
编辑:
Codepen在身体上工作的CSS .
Codepen在非工作CSS的HTML.
编辑: 由于固定位置的更复杂和检测身体滚动(似乎不太可能),我真的需要通过使用HTML元素来实现这一点.
奇怪的是,这是有点作品.按照此链接并单击并向左/向右拖动滑块,视差效果就在那里,只是当你向下滚动时...
当你向下滚动时,不太清楚为什么这个效果不起作用......
猜猜没有人知道这个问题的答案，所以我想我不妨发布我所做的事情。
看来您根本无法使用 HTML 标签来实现此视差效果，因此我只是将效果放在包含的 div 上，因此对于诸如粘性标题之类的功能，我可以简单地检查此 div 上的滚动量，然后将任何东西粘到position: sticky.
Sticky 在 Edge 或 IE 上不起作用，因此回退只是完全禁用这些浏览器上的视差效果，并将滚动返回到 HTML 元素，以便您可以使用position: fixed.
倒退：
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {