僅在CSS中可以以不同速度滾動的分層透明元素集？

Question

我有一組設置大致是這樣的三個要素：

HTML

<div class="background"> 
    <div class="image"> 
    <img src="img.png"/> 
    <div class="text"> 
     <span>Text</span> 
    </div> 
    </div> 
</div> 

假設我有簡單的CSS與背景是第三，所述圖像是第二到層他們，和文本首先根據距觀看者的距離而定，並且它們都是以最上面的容器爲中心的。背景有background-image，所有圖像和div元素都是透明的。

我想要做的是讓他們以相對於視口稍微不同的速度滾動。我不是特別熟悉CSS transform和perspective屬性，但我想知道這是否可以在CSS中使用。任何幫助？

Answer 1

當然是！你正在用純CSS來描述視差。這可能有幫助的example。 CSS-tricks也深入描述了這一點，here

關鍵是設置變換來反映用戶的距離。

.parallax { 
    perspective: 1px; 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.parallax__layer { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
.parallax__layer--base { 
    transform: translateZ(0); 
} 
.parallax__layer--back { 
    transform: translateZ(-1px); 
}