將視角添加到HTML以獲得全局視差 - 純CSS

我一直在關注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並單擊並拖動左/右滑塊，視差效果是有的，只是沒有當你向下滾動網頁...

也不太清楚爲什麼當你向下滾動這個效果不工作...

來源

2017-06-05 Martyn Ball

爲什麼要將它更改爲HTML而不是正文？ – nitobuendia

讓它在身體上停止顯示頁腳，因爲它位於身體下方。 –

猜測沒有人知道這個答案，所以我想我可以發佈我做的。

看起來你無法使用HTML標記來實現這種視差效果，所以我只是將效果放在一個包含div的東西上，所以對於諸如sticky headers之類的東西，我可以簡單地檢查滾動量在這個div和設置任何粘到position: sticky。

粘滯不能在邊緣或IE上工作，所以後退將只是完全禁用這些瀏覽器的視差效果，並將滾動回滾到HTML元素，因此您可以使用position: fixed。

預置：

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

來源

2017-06-06 10:41:34

你仍然需要幫助，或者你的問題是用這個答案解決的嗎？ – Christoph

還需要幫助，我會用更廣泛的例子更新我的問題，當我有機會時，重新開放獎金，一直很忙。 –

不知道如果我很理解你的問題，但你爲什麼不忽視身體/ 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包裝。這樣，它只觸摸你擁有/可以編輯的元素。

來源

2017-06-10 05:24:10 nitobuendia

這樣做會使'div.body'單獨滾動到頁面，我將在明天設置一個更好的示例，以便更有意義。 –

當然可以。高興地檢查新的例子:) – nitobuendia

將視角添加到HTML以獲得全局視差 - 純CSS

回答

相關問題