背景圖像附件固定（視差）滯後/ Chrome上

Question

一些滾動我有滯後/輕彈我的視差圖像的問題後筆觸，我注意到頁面的某些滾動後這個問題發生，只在頁面裏是貓頭鷹旋轉木馬也。我發現了很多解決方案，但他們不適合我。

我會解決它不使用JavaScript庫，你能給我一些建議嗎？

你能看到我的問題在這page，標題爲「承包商&建築經理自1991年以來」的部分。

Answer 1

其簡單..你可以試試這個代碼。

HTML

<div id="title" class="slide header"> 
    <h1>Pure CSS Parallax</h1> 
</div> 

<div id="slide1" class="slide"> 
    <div class="title"> 
    <h1>Slide 1</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>Slide 2</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> 
    <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg"> 
    <img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"> 
</div> 

<div id="slide3" class="slide"> 
    <div class="title"> 
    <h1>Slide 3</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> 

CSS

@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 { 
    width: 50%; 
    padding: 5%; 
    border-radius: 5px; 
    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/output/abstract-q-c-640-480-6.jpg"); 
    background-attachment: fixed; 
} 

#slide1:before { 
    background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"); 
    transform: translateZ(-1px) scale(2); 
    z-index:-1; 
} 

#slide2 { 
    background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg"); 
    background-attachment: fixed; 
} 

#slide3:before { 
    background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg"); 
    transform: translateZ(-1px) scale(2); 
    z-index:-1; 
} 

#slide4 { 
    background: #222; 
}