Trying to create a simple parallax effect in jquery

Question

I'm learning JS and JQ and I'm working on a simple parallax effect and I need help to get him right. Here is the code: 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');
    });
  });
});

As you can see when you scroll you see the red background. I don't want it to show the red background just the image. what is the solution?

Answer 1

Try with something like this

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