我一直在关注CSS视差指南Keith Clark's。他的概念,它像这样:将视角添加到HTML以获得全局视差 - 纯CSS
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);
}
这完美的作品在大多数情况下,例如在我的development website。不过,我需要将这种效果添加到其他网站,我无法控制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
和孩子之间的元素上,但是这似乎不起作用。
任何人都知道发生了什么问题?
编辑:
在体工作CSS的Codepen。
Codepen的非工作CSS的HTML。
编辑: 由于固定位置和检测机构滚动更复杂(似乎不可能),我真的需要通过使用HTML元素来实现这个工作。
奇怪的是,这是有点作品。 Follow this link并单击并拖动左/右滑块,视差效果是有的,只是没有当你向下滚动网页...
也不太清楚为什么当你向下滚动这个效果不工作...
为什么要将它更改为HTML而不是正文? – nitobuendia
让它在身体上停止显示页脚,因为它位于身体下方。 –