視差スクロール1枚の画像で作業しますが、他の

Question

に私は私の背景画像の2に視差効果を与えることに取り組んでいますし、それは最初の画像の上ではなく、二image..theコードに取り組んでいないが

以下の通りです

jqueryの：

$(document).ready(function() { 
$('section[data-type="background"]').each(function() { 

     var $bgobj = $(this); // assigning the object 

     $(window).scroll(function() { 

      // scroll the background at var speed 
      // the yPos is a negative value because we're scrolling it UP! 

      var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

      // Put together our final background position 
      var coords = '50% '+ yPos + 'px'; 

      // Move the background 
      $bgobj.css({ backgroundPosition: coords }); 

     }); // end window scroll 

    }); 

}); 

HTML： -

<section class="parallax" data-type="background" data-speed="5"> 
     <h2>Check out this cool parallax scrolling effect. Use these ribbons to display calls to action mid-page.</h2> 
     <button class="btn btn-lg btn-info">PARALLAX</button> 

    </section> 

CSS： -

.parallax { 
    height:35em; 
    background: url('https://images.unsplash.com/photo-1463123081488-789f998ac9c4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=6d1a6d1c5a7eb63d0c411b1d019f0b30'); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
} 

.parallax h2 { 
    color: white; 
    text-align: center; 
    padding: 1em; 
    padding-top: 5em; 
} 

.parallax button { 
    display: block; 
    margin: 2em auto; 
} 

奇妙な部分は、第2の画像が全く表示されませんし、私は、データ速度の属性を削除したが、その後、視差がwork..Iが立ち往生して混乱していない場合にのみ..だから

Answer 1

あなたはページを下にスクロールすると大きな取得します$ window.scrollTopを（）、使用、およびイメージコンテナの上部にその相対を設定しています。それはだとしてオフセット問題ではありませんので、

$(document).ready(function() { 
$('section[data-type="background"]').each(function() { 

    var $bgobj = $(this); // assigning the object 

    $(window).scroll(function() { 

     // scroll the background at var speed 
     // the yPos is a negative value because we're scrolling it UP! 

     var yOffset = $bgobj.offset().top; 
     var yPos = -(($window.scrollTop() - yOffset)/$bgobj.data('speed')); 

     // Put together our final background position 
     var coords = '50% '+ yPos + 'px'; 

     // Move the background 
     $bgobj.css({ backgroundPosition: coords }); 

    }); // end window scroll 

}); 

}); 

あなたの最初の画像は、おそらくページの上部に働いている：あなたが最初の文書の先頭から要素の位置を減算する必要があるように思えますか？

Answer 2

てみを支援してください示すことですこの

$(document).ready(function() { 
    $(window).scroll(function() { 
     $('section[data-type="background"]').each(function(i,e) { 
      // scroll the background at var speed 
       // the yPos is a negative value because we're scrolling it UP! 

       var yPos = -($(window).scrollTop()/$(e).data('speed')); 

       // Put together our final background position 
       var coords = '50% '+ yPos + 'px'; 

       // Move the background 
       $(e).css({ backgroundPosition: coords }); 
     }); 
    }); // end window scroll 

});