2017-06-05 50 views
10

我一直在关注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并单击并拖动左/右滑块,视差效果是有的,只是没有当你向下滚动网页...

也不太清楚为什么当你向下滚动这个效果不工作...

+0

为什么要将它更改为HTML而不是正文? – nitobuendia

+0

让它在身体上停止显示页脚,因为它位于身体下方。 –

回答

1

猜测没有人知道这个答案,所以我想我可以发布我做的。

看起来你无法使用HTML标记来实现这种视差效果,所以我只是将效果放在一个包含div的东西上,所以对于诸如sticky headers之类的东西,我可以简单地检查滚动量在这个div和设置任何粘到position: sticky

粘滞不能在边缘或IE上工作,所以后退将只是完全禁用这些浏览器的视差效果,并将滚动回滚到HTML元素,因此您可以使用position: fixed

预置:

@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) { 
+0

你仍然需要帮助,或者你的问题是用这个答案解决的吗? – Christoph

+0

还需要帮助,我会用更广泛的例子更新我的问题,当我有机会时,重新开放奖金,一直很忙。 –

0

不知道如果我很理解你的问题,但你为什么不忽视身体/ HTML,只是它映射到自己编辑的元素。

见工作示例

.body { 
 
    perspective: 1px; 
 
    height: 100vh !important; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    preserve-origin-x: 100%; 
 
} 
 
.body > div { height: 200%; } 
 
p { color: #fff; } 
 
.parallax__group { 
 
    position: relative; 
 
    // transform-style: preserve-3d; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    margin-top: 100px; 
 
} 
 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.parallax__layer--base { 
 
    transform: translateZ(0); 
 
    position: relative; 
 
    float: left; 
 
} 
 
.parallax__layer--back { 
 
    transform: translateZ(-1px) scale(2); 
 
    height: 100vh; 
 
    background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.row-block { 
 
    background: red; 
 
}
<html> 
 

 
<body> 
 
    <div itemscope itemtype="http://schema.org/AutoDealer"> 
 
    <div id="main-wrap"> 
 
     <div class="row"> 
 
     <div class="main twelvecol"> 
 

 
      <!-- Editable --> 
 
      <div class="body"> 
 
      <div> 
 
       <div class="row-block finance parallax__group"> 
 
       <div class="parallax__layer--back parallax__layer"></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> 
 
      </div> 
 
      <!-- END Editable --> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

它使用的你声称的 “工作” 的版本相同的CSS。我做的唯一改变是改变你的身体为一个.body,这是一个额外的div包装。这样,它只触摸你拥有/可以编辑的元素。

+0

这样做会使'div.body'单独滚动到页面,我将在明天设置一个更好的示例,以便更有意义。 –

+0

当然可以。高兴地检查新的例子:) – nitobuendia