スクロール中の背景画像の視差スクロール

Question

私は視差の問題に悩まされています。

マイページの上部に背景画像があります。私は現在background-position: fixedを持っているので、視差効果がありますが、この画像がページのスクロールにスクロールする必要がありますか？ ...そして今、私は立ち往生しています。

JavaScriptでこれを行うことができ、おそらくbackground-position: scrollと思っていますが、どこから始めたらいいか分かりません。

私の基本的なフィドルでは視差効果を見ることができますが、ページをスクロールするときに画像をスクロールする必要があります。

ありがとうございました。

.image { 
 
    height: 100px; 
 
    width: 100%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-image: url('http://www.navipedia.net/images/a/a9/Example.jpg'); 
 
}

<section> 
 
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p> 
 
</section> 
 

 
<div class="image"></div> 
 

 
<section> 
 
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta."</p> 
 

 
    <br><br> 
 
    
 
<p>"Sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est."</p> 
 
</section>

Answer 1

この機能は、あなたのための作業を行います。 （お好みに応じた速度変数の変動値）

(function(){ 

    var parallax = document.querySelectorAll(".image"), 
     speed = 0.5; 

    window.onscroll = function(){ 
    [].slice.call(parallax).forEach(function(el,i){ 

     var windowYOffset = window.pageYOffset, 
      elBackgrounPos = "50% " + (windowYOffset * speed) + "px"; 

     el.style.backgroundPosition = elBackgrounPos; 

    }); 
    }; 

})(); 

が行動でそれを参照してください：のhttps://jsfiddle.net/ksugkmoh/