试图在jquery中创建一个简单的视差效果

时间:2016-02-14 11:03:30

标签: javascript jquery html css parallax

我正在学习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');
    });
  });
});

正如您在滚动时看到的那样,您会看到红色背景。我不希望它只显示图像的红色背景。解决方案是什么?

1 个答案:

答案 0 :(得分:0)

尝试使用类似的东西

$(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');
    });
  });
});