視差：ジャンプ

Question

なし中央センターIは、数十人を試した後ソリューションの自分を考えることができなかったあなたが見ることができ、それが意図的であるとして、背景画像がcenter center配置されている

#banner .slide { 
    position: static; 
    top: 0px; 
    left: 0px; 
    z-index: 99; 
    opacity: 1; 
    display: block; 
    visibility: hidden; 
    background-image: url(http://wp-content/uploads/2260-000-01.jpg); 
} 


#banner .slide { 
    background-attachment: inherit; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    position: relative; 
} 

に近づきますbackground-attachementはfixedではありません（画像の狭い視野までのカバーリードとの組み合わせで常にそうです）。

私はこのスニペットを使用しています。

$(window).on('scroll', function(e) { 
     $('#banner .slide').css('background-position', 'center ' + $(window).scrollTop()*0.4 + 'px') 
    }) 

私はもちろん持っている問題は、もちろんJSがcenterが私のために何を意味するのかわからないので、最初のスクロール（scrollTopスプライトで非​​常に最初の変更）は、画像のジャンプにつながるということです。

私の目標は、イメージの垂直と水平の洞窟を常に見たいので、画像の位置を連続的に保つことです。center center

あなたは私はJSに画像の現在の垂直方向の中心を言うことができる方法を任意のトリックやアイデアを知っていますので、視差計算は、この時点からではなく0

おかげで、 マット

から始まる開始します

Answer 1

代わりに、スライドのトランスフォーム値を変更することで少し異なるアプローチをとることをお勧めします。

const parallaxables = document.querySelectorAll('.parallax'); 
 

 
function runParallaxLoop() { 
 
    requestAnimationFrame(runParallaxLoop); 
 
    parallax(); 
 
} 
 

 
function parallax() { 
 
    parallaxables.forEach(parallaxable => { 
 
     let distance = window.scrollY * 0.5; 
 
     parallaxable.style.transform = `translate3d(0,-${distance}px, 0)`; 
 
    }); 
 
} 
 

 
runParallaxLoop();

.parallax { 
 
    width: 100vw; 
 
    height: 500px; 
 
    margin-bottom: 400px; 
 
    background: url(http://lorempixel.com/1200/800/sports/) no-repeat center center; 
 
    background-attachment: fixed; 
 
}

<div class="parallax"></div>

フレームごとに、あなたはブラウザがスクロールされる速度の一定の割合でparallaxedする必要のある要素を変換します。

この機能を有効にするには、固定する視差可能な要素の背景の添付が必要です。