試圖在jQuery中創建一個簡單的視差效果

Question

我正在學習JS和JQ，並且正在研究一種簡單的視差效果，我需要幫助使他正確。 這是代碼： http : //codepen.io/ronka/pen/JGxxBb 。

$(document).ready(function(){
  $('section[data-type="parallax"]').each(function(){
    var $bgobj = $(this);
    $(window).scroll(function(){
        var $yPos = -($(window).scrollTop()- $bgobj.offset().top);
        console.log($(this));
        $bgobj.css('background-position','50% ' + $yPos +'px');
    });
  });
});

如您所見，滾動時會看到紅色背景。 我不希望它只顯示紅色背景圖像。 解決辦法是什么？

Answer 1

試試這樣的東西

$(document).ready(function(){
  $('section[data-type="parallax"]').each(function(){
    var $bgobj = $(this);
    $(window).scroll(function(){
        var yPos = $(window).scrollTop();
        $bgobj.css('background-position','50% -' + (yPos*0.4) +'px');
    });
  });
});