使用WordPress的纯CSS视差

Question

我想知道是否有可能创建一个纯CSS，视差效果使用4个重叠图层，而不使用Javascript。当用户向下滚动时，我希望第一个图像与第一个文本块重叠，并且一旦页面中的间隙再次出现，我希望第二个图像重叠第一个固定图像。我不能发布所有的代码，但我可以提供一个URL。任何帮助，将不胜感激。

http://learn.samausa.org/hire/

Answer 1

基思·克拉克已经设法做到这一点 - 你可以在这里阅读博客文章 http://keithclark.co.uk/articles/pure-css-parallax-websites/

我是一个Joomla用户自己，不熟悉WordPress的，但我想你应该能够实现这样的： HTML：

<div class="parallax">  
    <div class="parallaxLayer firstImage"> 
     <img src="yourfirstimage" /> 
    </div> 
    <div class="parallaxLayer text"> 
     <p> Your text goes here</p> 
    </div> 
    <div class="parallaxLayer secondImage"> 
     <img src="yourSecondImage" /> 
    </div> 
</div> 

CSS：

.parallax{ 
    perspective:1px; 
    height:100vh; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 

.parallaxLayer{ 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
} 
.firstImage{ 
    transform: translateZ(-2px) scale(3); 
} 
.text{ 
    transform:translateZ(-1px) scale(2); 
} 
.secondImage{ 
    transform: translateZ(-2px) scale(3); 
} 

当然会有一些间距和格式问题需要处理，但这应该给你一个坚实的开始。