簡單視差滾動 - 在橫幅

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>