バックグラウンド位置を％で設定したスクロール視差効果

Question

このguideに続いてスクロール視差エフェクトを作成する方法を学習しています。これまではとても良いですが、私のバックグラウンドポジションは'50％ '（中央）に設定されています。だから私は私のjsを実行すると、バックグラウンドの位置単位は％からpxに変更されているので、それは私が期待したものではありません。

バックグラウンド位置がパーセンテージで変化するようにコードを書き込むにはどうすればよいですか？ここで

はコードです：私は私のHTMLやCSSを変更することはできませんし、私はこの問題を解決する必要があります。

window.addEventListener('scroll', function(){ 
 
    var scrollPosition = window.pageYOffset; 
 
    var bgParallax = document.getElementsByClassName('parallax')[0]; 
 
    var limit = bgParallax.offsetTop + bgParallax.offsetHeight; 
 
    if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit){ 
 
    bgParallax.style.backgroundPositionY = scrollPosition/2 + 'px'; 
 
    }else{ 
 
    bgParallax.style.backgroundPositionY = '0';  
 
    } 
 
});

body{ 
 
    margin:0px; 
 
    padding:0px; 
 
    height:600px; 
 
} 
 
.parallax{ 
 
    width:100%; 
 
    height:300px; 
 
    background-color:red; 
 
    background-image:url('http://68.media.tumblr.com/9c811fb09ae9fe61e3bbcb1d7f0c3724/tumblr_o9489fIsmH1qhttpto3_1280.png'); 
 
    background-position:center; 
 
}

<div class='parallax'></div>

そしてここCODEPEN

PPDです学習目的のための純粋なjavascript。

Answer 1

これは何か？

これは本質的に同じことです.0pxの代わりに50％から始まり、画像の移動距離に応じて下にスクロールしながら減算します。 （この場合は10％が、そうbackgroundPositionYが40％から50％まで変化）

window.addEventListener('scroll', function(){ 
 
    var scrollPosition = window.pageYOffset; 
 
    var bgParallax = document.getElementsByClassName('parallax')[0]; 
 
    var limit = bgParallax.offsetTop + bgParallax.offsetHeight; 
 
    if (scrollPosition > bgParallax.offsetTop && scrollPosition <= limit){ 
 
    bgParallax.style.backgroundPositionY = (50 - 10*scrollPosition/limit) + '%'; 
 
    }else{ 
 
    bgParallax.style.backgroundPositionY = '50%';  
 
    } 
 
});

body{ 
 
    margin:0px; 
 
    padding:0px; 
 
    height:600px; 
 
} 
 
.parallax{ 
 
    width:100%; 
 
    height:300px; 
 
    background-color:red; 
 
    background-image:url('http://68.media.tumblr.com/9c811fb09ae9fe61e3bbcb1d7f0c3724/tumblr_o9489fIsmH1qhttpto3_1280.png'); 
 
    background-position:center; 
 
}

<div class='parallax'></div>