視差効果を得るためにこの背景画像を適切にターゲットにするにはどうすればよいですか？

Question

私はこの画像をそのまま「パララックスディバイダ」divの背景として持っていますが、視差を達成するために画像を他のコンテンツよりも遅くしたいと思います効果。私は間違ったやり方をターゲットにしていることを知っていますが、それを修正する方法を理解することはできません。私が得ることは、div全体を上下させることです。非常に望ましくない方法で伸ばします。どのようにこれを修正するための任意の意見？

はここCodepenです：代わりにtopプロパティのhttp://codepen.io/anon/pen/vxOYrQ

.section { 
    height: 300px; 
    background-color: blue; 
} 

.parallax-divider { 
    background: url('http://www.planwallpaper.com/static/images/Cool-Background-Wallpaper-Dekstop.jpg') top center no-repeat; 
    background-size: cover; 
    background-attachment: fixed; 
    height: 200px; 
} 

<div class="section"></div> 

<div class="parallax-divider" id="parlx"> 
    <div class="wrapper"> 
    <div class="parallax-divider__image"> 
     <h2>lorem ipsum</h2> 
    </div> 
    </div> 
</div> 

<div class="section"></div> 

function parallax() { 
    var parlx = document.getElementById('parlx'); 
    parlx.style.position = "relative"; 
    parlx.style.top = -(window.pageYOffset/8) + 'px'; 
} 
window.addEventListener("scroll", parallax, false) 

Answer 1

使用transform: translateY()。また視差要素をposition: absolute,width: 100%に設定してください。ように：

translate('+ (-(window.pageYOffset/8)) + 'px';