简单视差滚动 - 在横幅

Question

内容的幻灯片，我试图为内容上来，并通过旗帜重新创建页面http://demos.themetrust.com/hero/，那里有一个轻微的视差效果上找到的效果。

我不知道该如何去这样做，和大多数视差教程我发现的是两种完全不同风格的视差或CSS驱动那些并不真正增加太多的网站。有人能够指出我可以学习的合适教程或项目的方向吗？我一直在“视差横幅”下进行搜索，但是，也许我的名称是错误的？

Answer 1

这里是纯CSS视差滚动的例子。关键是像

transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); 

线也许看看这个问答&一个太Pure CSS parallax without fixed background height?

这是我的例子：

@import url(http://fonts.googleapis.com/css?family=Nunito); 
 
html { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    perspective: 1px; 
 
    transform-style: preserve-3d; 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
    font-family: Nunito; 
 
} 
 
h1 { 
 
    font-size: 250% 
 
} 
 
p { 
 
    font-size: 140%; 
 
    line-height: 150%; 
 
    color: #333; 
 
} 
 
.slide { 
 
    position: relative; 
 
    padding: 25vh 10%; 
 
    min-height: 100vh; 
 
    width: 100vw; 
 
    box-sizing: border-box; 
 
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); 
 
    transform-style: inherit; 
 
} 
 
img { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 35%; 
 
    width: 320px; 
 
    height: 240px; 
 
    transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); 
 
    padding: 10px; 
 
    border-radius: 5px; 
 
    background: rgba(240, 230, 220, .7); 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .7); 
 
} 
 
img:last-of-type { 
 
    transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg); 
 
} 
 
.slide:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.title { 
 
    padding: 5%; 
 
    border-radius: 2px; 
 
    background: rgba(240, 230, 220, .7); 
 
    box-shadow: 0 0 8px rgba(0, 0, 0, .7); 
 
} 
 
.slide:nth-child(2n) .title { 
 
    margin-left: 0; 
 
    margin-right: auto; 
 
} 
 
.slide:nth-child(2n+1) .title { 
 
    margin-left: auto; 
 
    margin-right: 0; 
 
} 
 
.slide, 
 
.slide:before { 
 
    background: 50% 50%/cover; 
 
} 
 
.header { 
 
    text-align: center; 
 
    font-size: 175%; 
 
    color: #fff; 
 
    text-shadow: 0 2px 2px #000; 
 
} 
 
#title { 
 
    background-image: url("http://lorempixel.com/640/480/abstract/6/"); 
 
    background-attachment: fixed; 
 
} 
 
#slide1:before { 
 
    background-image: url("http://lorempixel.com/640/480/abstract/4/"); 
 
    transform: translateZ(-1px) scale(2); 
 
    z-index: -1; 
 
} 
 
#slide2 { 
 
    background-image: url("http://lorempixel.com/640/480/abstract/3/"); 
 
    background-attachment: fixed; 
 
} 
 
#slide3:before { 
 
    background-image: url("http://lorempixel.com/640/480/abstract/5/"); 
 
    transform: translateZ(-1px) scale(2); 
 
    z-index: -1; 
 
} 
 
#slide4 { 
 
    background: #222; 
 
}

<div id="title" class="slide header"> 
 
    <h1>Your page title</h1> 
 
</div> 
 

 
<div id="slide1" class="slide"> 
 
    <div class="title"> 
 
    <h1>Part one</h1> 
 
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id 
 
     viris docendi denique vim.</p> 
 
    </div> 
 
</div> 
 

 
<div id="slide2" class="slide"> 
 
    <div class="title"> 
 
    <h1>Another part</h1> 
 
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id 
 
     viris docendi denique vim.</p> 
 
    </div> 
 
</div> 
 

 
<div id="slide3" class="slide"> 
 
    <div class="title"> 
 
    <h1>Addendum</h1> 
 
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id 
 
     viris docendi denique vim.</p> 
 
    </div> 
 
</div> 
 

 
<div id="slide4" class="slide header"> 
 
    <h1>The End</h1> 
 
</div>

Answer 2

据我了解的把戏，是在URL的末尾用“固定”设置在CSS背景照片。背景大小有助于将照片放入容器中，重置几乎是不必要的。

#example{ 
 
    margin-top:10em; 
 
    background:url('https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg') fixed; 
 
    background-size: cover; 
 
    height:300px; 
 
} 
 
body{ 
 
    height:2000px; 
 
}

<div id="example"></div>